Repository: Tencent/tdesign-mobile-vue
Pull request #507 (2023-03-01 08:30:51)

fix(Tag): update style
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [x] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue
相关PR： https://github.com/Tencent/tdesign-common/pull/1169
<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- feat(Tag):  支持 css variable

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] Changelog 已提供或无须提供


github-actions[bot]: [<img height="96" alt="失败" src="https://user-images.githubusercontent.com/5378891/75333447-1e63a280-58c1-11ea-975d-235367fd1522.png">](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/4301571267)
<!-- AUTO_PREVIEW_HOOK -->
anlyyao: @LeeJim  目前流水线上build失败应该是原dev分支问题，不是这条pr的问题～ 

Patch:
diff --git a/package.json b/package.json
index 63afced2..6ce5bec6 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,9 @@
     "prebuild": "rimraf dist/* lib/* es/* esm/* typings/*",
     "build": "cross-env NODE_ENV=production rollup -c scripts/rollup.config.js && npm run build:tsc",
     "build:tsc": "concurrently \"npm:build:tsc-*\"",
-    "build:tsc-es": "vue-tsc --declaration --emitDeclarationOnly --outDir es/ -p tsconfig.build.json",
-    "build:tsc-esm": "vue-tsc --declaration --emitDeclarationOnly --outDir esm/ -p tsconfig.build.json",
-    "build:tsc-lib": "vue-tsc --declaration --emitDeclarationOnly --outDir lib/ -p tsconfig.build.json",
+    "build:tsc-es": "vue-tsc --declaration --emitDeclarationOnly --outDir es/",
+    "build:tsc-esm": "vue-tsc --declaration --emitDeclarationOnly --outDir esm/",
+    "build:tsc-lib": "vue-tsc --declaration --emitDeclarationOnly --outDir lib/",
     "site": "cd site && vite build",
     "site:intranet": "cd site && vite build --mode intranet",
     "site:preview": "cd site && vite build --mode preview",
@@ -109,15 +109,15 @@
     "@rollup/plugin-url": "^6.0.0",
     "@soerenmartius/vue3-clipboard": "^0.1.1",
     "@types/jest": "^28.1.6",
-    "@types/prismjs": "^1.16.2",
     "@types/node": "18.8.0",
+    "@types/prismjs": "^1.16.2",
     "@typescript-eslint/eslint-plugin": "^5.5.0",
     "@typescript-eslint/parser": "~5.34.0",
     "@vitejs/plugin-vue": "^1.2.3",
     "@vitejs/plugin-vue-jsx": "^1.3.3",
     "@vitest/ui": "^0.16.0",
     "@vue/eslint-config-typescript": "^9.1.0",
-    "@vue/runtime-core": "3.2.41",
+    "@vue/runtime-core": "^3.2.41",
     "@vue/test-utils": "^2.0.0-rc.17",
     "autoprefixer": "^10.2.4",
     "axios": "^0.21.0",
@@ -167,7 +167,7 @@
     "vite": "^2.9.14",
     "vite-plugin-tdoc": "^2.0.1",
     "vitest": "^0.16.0",
-    "vue": "^3.2.33",
+    "vue": "^3.2.47",
     "vue-eslint-parser": "^8.0.1",
     "vue-router": "4.0.11",
     "vue-tsc": "^0.40.0"
diff --git a/src/_common b/src/_common
index 88ed6b9e..06597674 160000
--- a/src/_common
+++ b/src/_common
@@ -1,1 +1,1 @@
-Subproject commit 88ed6b9e831b0c36f84ad707d6281aba2bca1790
+Subproject commit 06597674880d15541257387d231a926856a974c9
diff --git a/src/action-sheet/action-sheet.vue b/src/action-sheet/action-sheet.vue
index 9d11256f..85d9e4cb 100644
--- a/src/action-sheet/action-sheet.vue
+++ b/src/action-sheet/action-sheet.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, watch, defineComponent, PropType, ComputedRef, SetupContext } from 'vue';
+import { ref, computed, watch, defineComponent, PropType, ComputedRef } from 'vue';
 import { useEmitEvent } from '../shared';
 import MenuList from './menu-list.vue';
 import MenuGrid from './menu-grid.vue';
@@ -93,7 +93,7 @@ export default defineComponent({
     },
   },
   emits: ['selected', 'update:modelValue', 'cancel', 'close'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const actionItems = ref([]);
 
diff --git a/src/action-sheet/menu-grid.vue b/src/action-sheet/menu-grid.vue
index 000bbcd4..f4067e68 100644
--- a/src/action-sheet/menu-grid.vue
+++ b/src/action-sheet/menu-grid.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { ref, SetupContext, defineComponent, computed } from 'vue';
+import { ref, defineComponent, computed } from 'vue';
 import config from '../config';
 import { Grid as TGrid, GridItem as TGridItem } from '../grid';
 
@@ -54,7 +54,7 @@ export default defineComponent({
     },
   },
   emits: ['selected'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const containerWrapper = ref<HTMLElement | null>(null);
     const moveOffset = ref(0);
     const currentIndex = ref(0);
diff --git a/src/action-sheet/menu-list.vue b/src/action-sheet/menu-list.vue
index b715bb9e..4ae200b6 100644
--- a/src/action-sheet/menu-list.vue
+++ b/src/action-sheet/menu-list.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { ref, SetupContext, defineComponent, PropType } from 'vue';
+import { ref, defineComponent, PropType } from 'vue';
 
 import config from '../config';
 import { ActionSheetItem } from './type';
@@ -32,7 +32,7 @@ export default defineComponent({
     },
   },
   emits: ['selected'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const handleSelected = (index: number) => {
       context.emit('selected', index);
     };
diff --git a/src/avatar/avatar.vue b/src/avatar/avatar.vue
index 4f1f4798..8ee8d58b 100644
--- a/src/avatar/avatar.vue
+++ b/src/avatar/avatar.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { computed, toRefs, defineComponent, getCurrentInstance, inject, ref, SetupContext } from 'vue';
+import { computed, toRefs, defineComponent, getCurrentInstance, inject, ref } from 'vue';
 import TBadge from '../badge';
 import TImage from '../image';
 import config from '../config';
@@ -47,7 +47,7 @@ export default defineComponent({
   components: { TNode, TBadge, TImage },
   props: AvatarProps,
   emits: ['error'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const internalInstance = getCurrentInstance();
     const avatarGroupProps = inject('avatarGroup', {}) as TdAvatarGroupProps;
diff --git a/src/back-top/back-top.vue b/src/back-top/back-top.vue
index 228c5148..b3788f2c 100644
--- a/src/back-top/back-top.vue
+++ b/src/back-top/back-top.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, SetupContext, getCurrentInstance, h } from 'vue';
+import { computed, defineComponent, getCurrentInstance, h } from 'vue';
 import { useElementBounding } from '@vueuse/core';
 import { BacktopIcon as TIconBackTop } from 'tdesign-icons-vue-next';
 
@@ -26,7 +26,7 @@ export default defineComponent({
   name,
   components: { TNode, TIconBackTop },
   props: BackTopProps,
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const el = computed(() => {
       return props.target ? props.target() : window.document.documentElement;
diff --git a/src/back-top/demos/base.vue b/src/back-top/demos/base.vue
deleted file mode 100644
index 209edf2f..00000000
--- a/src/back-top/demos/base.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <div>
-    <div class="button-group">
-      <t-button block size="large" variant="outline" @click="onBtnClick('round', '顶部')">圆角白底</t-button>
-      <t-button block size="large" variant="outline" @click="onBtnClick('round-dark', '顶部')">圆角黑底</t-button>
-      <t-button block size="large" variant="outline" @click="onBtnClick('round', '')">圆白底纯图标</t-button>
-      <t-button block size="large" variant="outline" @click="onBtnClick('round-dark', '')">圆黑底纯图标</t-button>
-    </div>
-    <p class="tdesign-mobile-demo-block__summary">半圆型返回顶部</p>
-    <div class="button-group">
-      <t-button block size="large" variant="outline" @click="onBtnClick1('half-round')">半圆白底</t-button>
-      <t-button block size="large" variant="outline" @click="onBtnClick1('half-round-dark')">半圆黑底</t-button>
-    </div>
-
-    <t-back-top v-show="showBackTop" :theme="theme" :text="text" />
-    <t-back-top v-show="showBackTop1" :theme="theme" text="返回顶部" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const theme = ref('round');
-const text = ref('顶部');
-const showBackTop = ref(false);
-const showBackTop1 = ref(false);
-
-const onBtnClick = (tem: string, txt: string) => {
-  text.value = txt;
-  theme.value = tem;
-  showBackTop.value = true;
-  showBackTop1.value = false;
-  window.scrollTo(0, 1200);
-};
-
-const onBtnClick1 = (tem: string) => {
-  theme.value = tem;
-  showBackTop.value = false;
-  showBackTop1.value = true;
-  window.scrollTo(0, 1200);
-};
-</script>
-
-<style lang="less" scoped>
-.button-group {
-  padding: 8px 16px 16px;
-  .t-button {
-    margin-bottom: 10px;
-  }
-}
-</style>
diff --git a/src/back-top/demos/mobile.vue b/src/back-top/demos/mobile.vue
index b293961d..d81f571d 100644
--- a/src/back-top/demos/mobile.vue
+++ b/src/back-top/demos/mobile.vue
@@ -49,7 +49,7 @@ const rowCols = [
 ];
 
 window.document.addEventListener('scroll', function (e: Event) {
-  const { scrollTop } = e.currentTarget?.scrollingElement || {};
+  const { scrollTop = 0 } = (e.currentTarget as Document)?.scrollingElement || {};
   if (scrollTop <= 300) {
     style.value = { display: 'none' };
   } else {
diff --git a/src/back-top/demos/target.vue b/src/back-top/demos/target.vue
deleted file mode 100644
index 0a51234d..00000000
--- a/src/back-top/demos/target.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <span ref="myDOM"></span>
-    <div class="tdesign-demo-block">
-      <t-back-top v-show="showBackTop" :target="myDOMTarget" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-  setup() {
-    const myDOM = ref(null);
-    const myDOMTarget = () => {
-      return myDOM.value;
-    };
-    return {
-      myDOM,
-      myDOMTarget,
-    };
-  },
-});
-</script>
-
-<style scoped></style>
diff --git a/src/back-top/demos/theme.vue b/src/back-top/demos/theme.vue
deleted file mode 100644
index 2ff10be8..00000000
--- a/src/back-top/demos/theme.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <div>
-    <div class="tdesign-demo-block">
-      <t-back-top v-show="showBackTop" theme="half-round-dark" />
-      <t-back-top v-show="showBackTop" text="顶部">
-        <template #icon>
-          <div>图标</div>
-        </template>
-      </t-back-top>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({});
-</script>
-
-<style scoped></style>
diff --git a/src/button/button.vue b/src/button/button.vue
index e76f1ca6..8af78021 100644
--- a/src/button/button.vue
+++ b/src/button/button.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { computed, toRefs, defineComponent, getCurrentInstance, h, SetupContext } from 'vue';
+import { computed, toRefs, defineComponent, getCurrentInstance, h } from 'vue';
 import { LoadingIcon } from 'tdesign-icons-vue-next';
 import { useEmitEvent, renderContent, renderTNode, TNode } from '../shared';
 import CLASSNAMES from '../shared/constants';
@@ -25,7 +25,7 @@ export default defineComponent({
   components: { TNode },
   props: ButtonProps,
   emits: ['click'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const internalInstance = getCurrentInstance();
     const buttonClass = computed(() => [
diff --git a/src/calendar/demos/custom-text.vue b/src/calendar/demos/custom-text.vue
index c302540b..255dadca 100644
--- a/src/calendar/demos/custom-text.vue
+++ b/src/calendar/demos/custom-text.vue
@@ -6,9 +6,20 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
+type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | '';
+
+interface TDate {
+  date: Date;
+  day: number;
+  type: TDateType;
+  className?: string;
+  prefix?: string;
+  suffix?: string;
+}
+
 const minDate = new Date(2022, 1, 1);
 const maxDate = new Date(2022, 2, 15);
-const format = (day) => {
+const format = (day: TDate) => {
   const { date } = day;
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
diff --git a/src/cascader/cascader-item.vue b/src/cascader/cascader-item.vue
index 875ef942..756df224 100644
--- a/src/cascader/cascader-item.vue
+++ b/src/cascader/cascader-item.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, SetupContext, computed, toRefs, getCurrentInstance } from 'vue';
+import { defineComponent, computed, toRefs, getCurrentInstance } from 'vue';
 import { CheckIcon } from 'tdesign-icons-vue-next';
 import config from '../config';
 import { useEmitEvent, renderTNode } from '../shared';
@@ -25,7 +25,7 @@ export default defineComponent({
   components: { CheckIcon },
   props: CascaderItemProps,
   emits: ['click'],
-  setup(props: any, context: SetupContext) {
+  setup(props: any, context) {
     const className = computed(() => [
       `${name}`,
       Boolean(props.active) && 'active',
diff --git a/src/cascader/cascader.vue b/src/cascader/cascader.vue
index e0be314f..b4961af0 100644
--- a/src/cascader/cascader.vue
+++ b/src/cascader/cascader.vue
@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import { CloseIcon } from 'tdesign-icons-vue-next';
-import { defineComponent, toRefs, getCurrentInstance, SetupContext, computed, ref, toRaw, reactive } from 'vue';
+import { defineComponent, toRefs, getCurrentInstance, computed, ref, toRaw, reactive } from 'vue';
 import { TdCascaderItems, TdCascaderItem } from './type';
 import CascaderSteps from './steps.vue';
 import config from '../config';
@@ -48,7 +48,7 @@ export default defineComponent({
   components: { CloseIcon, CascaderItem, TNode, CascaderSteps },
   props: CascaderProps,
   emits: ['change', 'cancel', 'pick', 'click-tab', 'update:modelValue', 'update:value'],
-  setup(props: any, context: SetupContext) {
+  setup(props: any, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const { value, modelValue } = toRefs(props);
     const [cascaderValue, setCascaderValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
diff --git a/src/cell/cell.vue b/src/cell/cell.vue
index ba41bf69..71c2d94e 100644
--- a/src/cell/cell.vue
+++ b/src/cell/cell.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, toRefs, h, SetupContext } from 'vue';
+import { computed, defineComponent, getCurrentInstance, toRefs, h } from 'vue';
 import { ChevronRightIcon } from 'tdesign-icons-vue-next';
 import { renderTNode, renderContent, TNode, useEmitEvent } from '../shared';
 import config from '../config';
@@ -37,7 +37,7 @@ export default defineComponent({
   components: { TNode },
   props: CellProps,
   emits: ['click'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const internalInstance = getCurrentInstance();
     const noteContent = computed(() => renderContent(internalInstance, 'default', 'note'));
diff --git a/src/checkbox/checkbox.vue b/src/checkbox/checkbox.vue
index 131ffe3b..cbde5e19 100644
--- a/src/checkbox/checkbox.vue
+++ b/src/checkbox/checkbox.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import { inject, computed, SetupContext, defineComponent, getCurrentInstance, h, toRefs, CSSProperties } from 'vue';
+import { inject, computed, defineComponent, getCurrentInstance, h, toRefs, CSSProperties } from 'vue';
 import { MinusCircleFilledIcon, CheckCircleFilledIcon, CircleIcon } from 'tdesign-icons-vue-next';
 import config from '../config';
 import CheckboxProps from './props';
@@ -73,7 +73,7 @@ export default defineComponent({
     },
   },
   emits: ['update:checked', 'update:modelValue', 'change'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const flagName = name;
     const checkIcons = props.icon || [h(CheckCircleFilledIcon), h(CircleIcon)];
     const [innerChecked, setInnerChecked] = useDefault<boolean, TdCheckboxProps>(
diff --git a/src/checkbox/group.vue b/src/checkbox/group.vue
index 66c4c21e..5e913222 100644
--- a/src/checkbox/group.vue
+++ b/src/checkbox/group.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { SetupContext, provide, ref, computed, defineComponent, watch, toRefs, VNode, reactive, onMounted } from 'vue';
+import { provide, ref, computed, defineComponent, watch, toRefs, VNode, reactive, onMounted } from 'vue';
 import config from '../config';
 import CheckboxProps from './checkbox-group-props';
 import Checkbox from './checkbox.vue';
@@ -37,7 +37,7 @@ export default defineComponent({
   },
   props: CheckboxProps,
   emits: ['update:value', 'update:modelValue', 'change'],
-  setup(props: any, context: SetupContext) {
+  setup(props: any, context) {
     const { isArray } = Array;
     const [innerValue, setinnerValue] = useDefault<CheckboxGroupValue, TdCheckboxGroupProps>(
       props,
diff --git a/src/collapse/collapse-panel.vue b/src/collapse/collapse-panel.vue
index 54f0ea82..68c18095 100644
--- a/src/collapse/collapse-panel.vue
+++ b/src/collapse/collapse-panel.vue
@@ -18,17 +18,7 @@
 </template>
 
 <script lang="ts">
-import {
-  ref,
-  computed,
-  nextTick,
-  watch,
-  onMounted,
-  inject,
-  SetupContext,
-  defineComponent,
-  getCurrentInstance,
-} from 'vue';
+import { ref, computed, nextTick, watch, onMounted, inject, defineComponent, getCurrentInstance } from 'vue';
 import { ChevronDownIcon, ChevronUpIcon } from 'tdesign-icons-vue-next';
 import props from './collapse-panel-props';
 import config from '../config';
@@ -42,7 +32,7 @@ export default defineComponent({
   name,
   components: { ChevronDownIcon, ChevronUpIcon, TNode },
   props,
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const internalInstance = getCurrentInstance();
     const parent = inject<CollapseProvide>('collapse');
     const isTrue = (val: any) => typeof val === 'boolean' && val;
diff --git a/src/collapse/collapse.vue b/src/collapse/collapse.vue
index 897252e2..48ed838d 100644
--- a/src/collapse/collapse.vue
+++ b/src/collapse/collapse.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, provide, SetupContext, defineComponent, computed, Ref, ComputedRef } from 'vue';
+import { toRefs, provide, defineComponent, computed, Ref, ComputedRef } from 'vue';
 import props from './props';
 import config from '../config';
 import { useVModel } from '../shared';
@@ -25,7 +25,7 @@ export default defineComponent({
   name,
   props,
   emits: ['update:value', 'change'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const { value, modelValue } = toRefs(props);
     const [activeValue, setActiveValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
     const calcActiveValues = (activeValues: any[], panelValue: any, expandMutex: boolean) => {
diff --git a/src/date-time-picker/date-time-picker.vue b/src/date-time-picker/date-time-picker.vue
index 70563f35..f9cc4aac 100644
--- a/src/date-time-picker/date-time-picker.vue
+++ b/src/date-time-picker/date-time-picker.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, defineComponent, SetupContext, toRefs, watch, nextTick } from 'vue';
+import { ref, computed, defineComponent, toRefs, watch, nextTick } from 'vue';
 import dayjs from 'dayjs';
 import weekday from 'dayjs/plugin/weekday';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -47,7 +47,7 @@ export default defineComponent({
   components: { TPicker },
   props: DateTimePickerProps,
   emits: ['change', 'cancel', 'confirm', 'pick', 'update:modelValue', 'update:value'],
-  setup(props: any, context: SetupContext) {
+  setup(props: any, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const pickeInstance = ref<any>(null);
     const isChanged = ref(false);
diff --git a/src/dialog/index.ts b/src/dialog/index.ts
index c4bb1670..b0287bc7 100644
--- a/src/dialog/index.ts
+++ b/src/dialog/index.ts
@@ -104,7 +104,7 @@ Dialog.install = (app: App, name = '') => {
   app.component(name || Dialog.name, Dialog);
 
   // 添加插件入口
-  app.config.globalProperties.$dialog = Dialog;
+  app.config.globalProperties.$dialog = Dialog as any;
   app.provide('$dialog', Dialog);
 };
 
diff --git a/src/drawer/drawer.vue b/src/drawer/drawer.vue
index f892cf4d..f75cd1ae 100644
--- a/src/drawer/drawer.vue
+++ b/src/drawer/drawer.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-import { ref, watch, toRefs, computed, SetupContext, defineComponent } from 'vue';
+import { ref, watch, toRefs, computed, defineComponent } from 'vue';
 import TPopup from '../popup';
 import config from '../config';
 import { useEmitEvent } from '../shared';
@@ -38,7 +38,7 @@ export default defineComponent({
   components: { TPopup },
   props: DrawerProps,
   emits: ['update:visible', 'itemClick', 'overlayClick'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const { visible, items, placement, showOverlay, zIndex, closeOnOverlayClick } = toRefs(props);
     const open = ref(visible.value || false);
diff --git a/src/dropdown-menu/demos/demo-container.vue b/src/dropdown-menu/demos/demo-container.vue
index 1ef9d828..210e40c8 100644
--- a/src/dropdown-menu/demos/demo-container.vue
+++ b/src/dropdown-menu/demos/demo-container.vue
@@ -4,8 +4,8 @@
   </div>
 </template>
 
-<script>
-import { ref, computed, onMounted, defineComponent } from 'vue';
+<script lang="ts">
+import { Ref, ref, computed, onMounted, defineComponent } from 'vue';
 
 const componentName = 'dropdown-menu';
 const name = `tdesign-demo-${componentName}`;
@@ -13,13 +13,13 @@ const name = `tdesign-demo-${componentName}`;
 export default defineComponent({
   name,
   setup() {
-    const refContainer = ref(null);
-    const extraContainerClass = ref([]);
+    const refContainer = ref<HTMLElement | null>(null);
+    const extraContainerClass: Ref<Array<string>> = ref([]);
     const containerClass = computed(() => [`${name}`, ...extraContainerClass.value]);
     onMounted(() => {
-      const container = refContainer.value;
+      const container = refContainer.value as HTMLElement;
       const containerRect = container.getBoundingClientRect();
-      const isNeedRelativeContainer = containerRect.left > 0;
+      const isNeedRelativeContainer = containerRect?.left > 0;
       if (isNeedRelativeContainer) {
         extraContainerClass.value.push('relative-container');
       }
diff --git a/src/dropdown-menu/dropdown-item.vue b/src/dropdown-menu/dropdown-item.vue
index 6dc5e2b0..db123d31 100644
--- a/src/dropdown-menu/dropdown-item.vue
+++ b/src/dropdown-menu/dropdown-item.vue
@@ -108,19 +108,7 @@
 
 <script lang="ts">
 import { CheckIcon } from 'tdesign-icons-vue-next';
-import {
-  h,
-  ref,
-  watch,
-  toRefs,
-  inject,
-  computed,
-  reactive,
-  nextTick,
-  SetupContext,
-  onBeforeMount,
-  defineComponent,
-} from 'vue';
+import { h, ref, watch, toRefs, inject, computed, reactive, nextTick, onBeforeMount, defineComponent } from 'vue';
 import { TNode } from '../common';
 import TRadio from '../radio';
 import config from '../config';
@@ -157,7 +145,7 @@ export default defineComponent({
   components: { TRadio, TButton, TCheckbox, TRadioGroup, TCheckboxGroup },
   props: DropdownItemProps,
   emits: ['change', 'open', 'opened', 'close', 'closed', 'update:value', 'update:modelValue'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     // 受控 value 属性
     const { value, modelValue } = toRefs(props);
@@ -186,7 +174,7 @@ export default defineComponent({
       showOverlay: computed(() => menuProps.overlay),
       isShowItems: false,
       isExpanded: false,
-      expandStyle: {},
+      expandStyle: {} as Object,
       transitionStyle: computed(() => ({
         transition: `transform ${menuProps.duration}ms ease`,
         '-webkit-transition': `transform ${menuProps.duration}ms ease`,
diff --git a/src/fab/fab.vue b/src/fab/fab.vue
index 27df7c90..4b457af8 100644
--- a/src/fab/fab.vue
+++ b/src/fab/fab.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, SetupContext, getCurrentInstance } from 'vue';
+import { computed, defineComponent, getCurrentInstance } from 'vue';
 import { renderTNode, TNode, useEmitEvent } from '../shared';
 import props from './props';
 import config from '../config';
@@ -20,7 +20,7 @@ export default defineComponent({
   components: { TNode, TButton },
   props,
   emits: ['click'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
 
     const classes = computed(() => ({
diff --git a/src/icon/demos/base.vue b/src/icon/demos/base.vue
index 775038ed..25a342bf 100644
--- a/src/icon/demos/base.vue
+++ b/src/icon/demos/base.vue
@@ -23,7 +23,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { Icon } from 'tdesign-icons-vue-next';
 
 const onIconClose = () => {
diff --git a/src/icon/demos/enhanced.vue b/src/icon/demos/enhanced.vue
index 6a8f5f12..10d3a4c8 100644
--- a/src/icon/demos/enhanced.vue
+++ b/src/icon/demos/enhanced.vue
@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { Icon } from 'tdesign-icons-vue-next';
 
 const newSvgUrl = 'https://tdesign.gtimg.com/icon/default-demo/index.js';
diff --git a/src/icon/demos/iconfont.vue b/src/icon/demos/iconfont.vue
index 11c5b520..457f9081 100644
--- a/src/icon/demos/iconfont.vue
+++ b/src/icon/demos/iconfont.vue
@@ -23,7 +23,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { IconFont } from 'tdesign-icons-vue-next';
 
 const onIconClose = () => {
diff --git a/src/icon/demos/single.vue b/src/icon/demos/single.vue
index 3d418a20..a5db97a8 100644
--- a/src/icon/demos/single.vue
+++ b/src/icon/demos/single.vue
@@ -23,7 +23,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { LoadingIcon, CloseIcon, CheckCircleFilledIcon } from 'tdesign-icons-vue-next';
 
 const onIconClose = () => {
diff --git a/src/image-viewer/image-viewer.vue b/src/image-viewer/image-viewer.vue
index 4b1f15a2..7d642f0a 100644
--- a/src/image-viewer/image-viewer.vue
+++ b/src/image-viewer/image-viewer.vue
@@ -28,17 +28,7 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  toRefs,
-  ref,
-  defineComponent,
-  reactive,
-  watch,
-  getCurrentInstance,
-  CSSProperties,
-  SetupContext,
-} from 'vue';
+import { computed, toRefs, ref, defineComponent, reactive, watch, getCurrentInstance, CSSProperties } from 'vue';
 import { CloseCircleFilledIcon } from 'tdesign-icons-vue-next';
 import config from '../config';
 import ImageViewerProps from './props';
@@ -71,7 +61,7 @@ export default defineComponent({
   },
   props: ImageViewerProps,
   emits: ['close', 'index-change', 'update:visible', 'update:modelValue', 'change'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const state = reactive({
       zooming: false,
       scale: 1,
diff --git a/src/image/image.vue b/src/image/image.vue
index c2aac43e..78277265 100644
--- a/src/image/image.vue
+++ b/src/image/image.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, defineComponent, SetupContext, getCurrentInstance, h, watchEffect } from 'vue';
+import { ref, computed, defineComponent, getCurrentInstance, h, watchEffect } from 'vue';
 import { useIntersectionObserver } from '@vueuse/core';
 import { EllipsisIcon, CloseIcon } from 'tdesign-icons-vue-next';
 import { useEmitEvent, renderTNode, TNode } from '../shared';
@@ -30,7 +30,7 @@ export default defineComponent({
   name,
   components: { TNode },
   props: ImageProps,
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
 
     // 默认loading和error状态展示，slot支持Node和Function
diff --git a/src/indexes/indexes.vue b/src/indexes/indexes.vue
index 91ee76ae..1ac171bc 100644
--- a/src/indexes/indexes.vue
+++ b/src/indexes/indexes.vue
@@ -55,7 +55,6 @@ import {
   computed,
   onBeforeUnmount,
   toRefs,
-  SetupContext,
 } from 'vue';
 import config from '../config';
 import { ListItem } from './type';
@@ -98,7 +97,7 @@ export default defineComponent({
   components: { indexesAnchor, TIndexesCell },
   props: IndexesProps,
   emits: ['select'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     let timeOut: number;
     const indexesRoot = ref<null | HTMLElement>(null);
diff --git a/src/input/input.vue b/src/input/input.vue
index 704ba26e..3c306223 100644
--- a/src/input/input.vue
+++ b/src/input/input.vue
@@ -47,7 +47,7 @@
 
 <script lang="ts">
 import { CloseCircleFilledIcon } from 'tdesign-icons-vue-next';
-import { ref, computed, defineComponent, getCurrentInstance, toRefs, SetupContext, nextTick, watch } from 'vue';
+import { ref, computed, defineComponent, getCurrentInstance, toRefs, nextTick, watch } from 'vue';
 import { useFocus } from '@vueuse/core';
 import TCell from '../cell';
 import config from '../config';
@@ -68,7 +68,7 @@ export default defineComponent({
   },
   props: InputProps,
   emits: ['update:value', 'update:modelValue', 'click-icon', 'focus', 'blur', 'change', 'clear'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const inputRef = ref();
     const { autofocus } = toRefs(props);
diff --git a/src/list/list.vue b/src/list/list.vue
index 95863511..a8db9704 100644
--- a/src/list/list.vue
+++ b/src/list/list.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, getCurrentInstance, SetupContext } from 'vue';
+import { defineComponent, ref, computed, getCurrentInstance } from 'vue';
 import { useElementBounding, useWindowSize, useEventListener } from '@vueuse/core';
 import TLoading from '../loading';
 import config from '../config';
@@ -37,7 +37,7 @@ export default defineComponent({
   },
   props: ListProps,
   emits: ['load-more', 'scroll'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const root = ref<HTMLElement>();
     const empty = ref<HTMLElement>();
diff --git a/src/message/index.ts b/src/message/index.ts
index fc6432bd..ab833ecf 100644
--- a/src/message/index.ts
+++ b/src/message/index.ts
@@ -69,7 +69,7 @@ Message.install = (app: App, name = '') => {
 
   // 添加插件入口
   // eslint-disable-next-line no-param-reassign
-  app.config.globalProperties.$message = Message;
+  app.config.globalProperties.$message = Message as any;
 };
 
 type MessageApi = {
diff --git a/src/message/message.vue b/src/message/message.vue
index b543035c..2f8e0df5 100644
--- a/src/message/message.vue
+++ b/src/message/message.vue
@@ -27,7 +27,6 @@ import {
   watch,
   defineComponent,
   getCurrentInstance,
-  SetupContext,
   toRefs,
   reactive,
   nextTick,
@@ -55,7 +54,7 @@ export default defineComponent({
   components: { TNode },
   props: messageProps,
   emits: ['change', 'open', 'opened', 'close', 'closed'],
-  setup(props: any, context: SetupContext) {
+  setup(props: any, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const internalInstance = getCurrentInstance();
 
diff --git a/src/navbar/navbar.vue b/src/navbar/navbar.vue
index b3885a95..52ffc67e 100644
--- a/src/navbar/navbar.vue
+++ b/src/navbar/navbar.vue
@@ -21,7 +21,7 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, SetupContext, toRefs } from 'vue';
+import { computed, defineComponent, getCurrentInstance, toRefs } from 'vue';
 import { ChevronLeftIcon as TChevronLeftIcon, HomeIcon as THomeIcon } from 'tdesign-icons-vue-next';
 import config from '../config';
 import { renderTNode, TNode, useEmitEvent } from '../shared';
@@ -35,7 +35,7 @@ export default defineComponent({
   components: { TChevronLeftIcon, TNode, THomeIcon },
   props: NavbarProps,
   emits: ['left-click', 'right-click'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const internalInstance = getCurrentInstance();
     const { title, titleMaxLength, fixed, background } = toRefs(props);
 
diff --git a/src/notice-bar/notice-bar.vue b/src/notice-bar/notice-bar.vue
index 92efb38f..891b15e3 100644
--- a/src/notice-bar/notice-bar.vue
+++ b/src/notice-bar/notice-bar.vue
@@ -35,7 +35,6 @@ import {
   reactive,
   ref,
   toRefs,
-  SetupContext,
   computed,
   onMounted,
   nextTick,
@@ -65,7 +64,7 @@ export default defineComponent({
   components: { TNode },
   props: NoticeBarProps,
   emits: ['click', 'change'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const internalInstance = getCurrentInstance();
     // 初始化数据
diff --git a/src/picker/cascade.vue b/src/picker/cascade.vue
index cecfe27f..7ed4d5f2 100644
--- a/src/picker/cascade.vue
+++ b/src/picker/cascade.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, SetupContext, ref } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import config from '../config';
 import PickerProps from './props';
 import { PickerColumn, PickerValue } from './type';
@@ -18,7 +18,7 @@ export default defineComponent({
   name,
   components: { Picker },
   props: PickerProps,
-  setup(props: any, context: SetupContext) {
+  setup(props: any, context) {
     const pickerProps = computed(() => ({ ...props }));
     const finalDepth = ref(1);
     const finalSubOptionsRecord = ref({});
diff --git a/src/picker/picker-item.vue b/src/picker/picker-item.vue
index 81e01194..d1960d38 100644
--- a/src/picker/picker-item.vue
+++ b/src/picker/picker-item.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, onMounted, toRefs, defineComponent, PropType, SetupContext } from 'vue';
+import { ref, computed, onMounted, toRefs, defineComponent, PropType } from 'vue';
 import config from '../config';
 import Picker from './picker.class';
 import { PickerColumnItem, PickerValue } from './type';
@@ -34,7 +34,7 @@ export default defineComponent({
     },
   },
   emits: ['pick'],
-  setup(props: any, context: SetupContext) {
+  setup(props: any, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     let picker: Picker | null = null;
     const el = document.createElement('div');
diff --git a/src/picker/picker.vue b/src/picker/picker.vue
index 9c9a8edb..fc25a4df 100644
--- a/src/picker/picker.vue
+++ b/src/picker/picker.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-import { computed, nextTick, defineComponent, SetupContext, toRefs, onMounted, ref } from 'vue';
+import { computed, nextTick, defineComponent, toRefs, onMounted, ref } from 'vue';
 import config from '../config';
 import PickerProps from './props';
 import { PickerValue, PickerColumn, PickerColumnItem } from './type';
@@ -48,7 +48,7 @@ export default defineComponent({
   components: { TButton, PickerItem },
   props: PickerProps,
   emits: ['change', 'cancel', 'pick', 'update:modelValue', 'update:value'],
-  setup(props: any, context: SetupContext) {
+  setup(props: any, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const { value, modelValue } = toRefs(props);
     const [pickerValue, setPickerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
diff --git a/src/popup/popup.vue b/src/popup/popup.vue
index a12403f6..fcf796dc 100644
--- a/src/popup/popup.vue
+++ b/src/popup/popup.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, SetupContext, watch, defineComponent } from 'vue';
+import { ref, computed, watch, defineComponent } from 'vue';
 import popupProps from './props';
 import TOverlay from '../overlay';
 import config from '../config';
@@ -35,7 +35,7 @@ export default defineComponent({
   components: { TOverlay },
   props: popupProps,
   emits: ['open', 'close', 'opened', 'closed', 'visible-change', 'update:visible', 'update:modelValue'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const [currentVisible] = useDefault<TdPopupProps['visible'], TdPopupProps>(
       props,
diff --git a/src/pull-down-refresh/pull-down-refresh.vue b/src/pull-down-refresh/pull-down-refresh.vue
index c41a6ee7..277bcec6 100644
--- a/src/pull-down-refresh/pull-down-refresh.vue
+++ b/src/pull-down-refresh/pull-down-refresh.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onUnmounted, ref, toRefs, computed, SetupContext, watch } from 'vue';
+import { defineComponent, onUnmounted, ref, toRefs, computed, watch } from 'vue';
 import { useElementSize } from '@vueuse/core';
 import PullDownRefreshProps from './props';
 import { useEmitEvent, useVModel } from '../shared';
@@ -40,7 +40,7 @@ export default defineComponent({
   components: { TLoading },
   props: PullDownRefreshProps,
   emits: ['refresh', 'timeout', 'update:value', 'update:modelValue'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
 
     // 动态生成style
diff --git a/src/radio-group/radio-group.vue b/src/radio-group/radio-group.vue
index b5034ccc..27e4cd05 100644
--- a/src/radio-group/radio-group.vue
+++ b/src/radio-group/radio-group.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { provide, defineComponent, toRefs, computed, SetupContext } from 'vue';
+import { provide, defineComponent, toRefs, computed } from 'vue';
 import { useDefault } from '../shared';
 import RadioGroupProps from '../radio/radio-group-props';
 import { RadioOption, RadioOptionObj, RadioValue, TdRadioGroupProps } from '../radio/type';
@@ -31,7 +31,7 @@ export default defineComponent({
   components: { Radio },
   props: RadioGroupProps,
   emits: ['update:value', 'update:modelValue', 'change'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const [groupValue, setGroupValue] = useDefault<RadioValue, TdRadioGroupProps>(
       props,
       context.emit,
diff --git a/src/radio/radio.vue b/src/radio/radio.vue
index 7594560d..a65357a5 100644
--- a/src/radio/radio.vue
+++ b/src/radio/radio.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import { inject, computed, defineComponent, getCurrentInstance, h, SetupContext, Ref, toRefs } from 'vue';
+import { inject, computed, defineComponent, getCurrentInstance, h, Ref, toRefs } from 'vue';
 import { CheckIcon } from 'tdesign-icons-vue-next';
 import { renderContent, renderTNode, TNode, NOOP, useDefault, useVModel } from '../shared';
 import ClASSNAMES from '../shared/constants';
@@ -52,7 +52,7 @@ export default defineComponent({
     },
   },
   emits: ['update:checked', 'update:modelValue', 'change'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const { checked, modelValue } = toRefs(props);
     const [innerChecked, setInnerChecked] = useVModel(
       checked,
diff --git a/src/rate/rate.vue b/src/rate/rate.vue
index 446e63a0..344a99e6 100644
--- a/src/rate/rate.vue
+++ b/src/rate/rate.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, SetupContext, defineComponent, ExtractPropTypes, PropType, ComputedRef } from 'vue';
+import { ref, computed, defineComponent, ExtractPropTypes, PropType, ComputedRef } from 'vue';
 import { StarFilledIcon, StarIcon } from 'tdesign-icons-vue-next';
 import rateProps from './props';
 import config from '../config';
@@ -51,7 +51,7 @@ export default defineComponent({
   components: { StarFilledIcon, StarIcon },
   props: rateProps,
   emits: ['change', 'update:value', 'update:modelValue'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const rateWrapper = ref<HTMLElement | null>(null);
     const [actualVal] = useDefault<number, TdRateProps>(props, context.emit, 'value', 'change');
     const rateText = computed(() => {
diff --git a/src/result/result.vue b/src/result/result.vue
index 918d7e40..b7ae8c0c 100644
--- a/src/result/result.vue
+++ b/src/result/result.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { h, computed, toRefs, getCurrentInstance, SetupContext, defineComponent } from 'vue';
+import { h, computed, toRefs, getCurrentInstance, defineComponent } from 'vue';
 import { InfoCircleIcon, CheckCircleIcon, CloseCircleIcon } from 'tdesign-icons-vue-next';
 import resultProps from './props';
 import config from '../config';
diff --git a/src/shared/useDefault/index.ts b/src/shared/useDefault/index.ts
index 2c374dc5..616cd8f3 100644
--- a/src/shared/useDefault/index.ts
+++ b/src/shared/useDefault/index.ts
@@ -1,4 +1,4 @@
-import { computed, ref, SetupContext, watchEffect, WritableComputedRef } from 'vue';
+import { computed, ref, watchEffect, WritableComputedRef } from 'vue';
 import camelCase from 'lodash/camelCase';
 
 function getDefaultName(key: string): string {
@@ -21,7 +21,7 @@ function getEventPropsName(eventName: string): string {
  * @example const [value, setValue] = useDefault();
  * @returns [value, setValue]
  */
-export function useDefault<V, T>(props: T, emit: SetupContext['emit'], key: string, eventName: string) {
+export function useDefault<V, T>(props: T, emit: (...args: any[]) => void, key: string, eventName: string) {
   const modelValue = 'modelValue';
   const defaultName = getDefaultName(String(key));
 
diff --git a/src/shared/useEmitEvent/index.ts b/src/shared/useEmitEvent/index.ts
index de18c431..8ee8a2a7 100644
--- a/src/shared/useEmitEvent/index.ts
+++ b/src/shared/useEmitEvent/index.ts
@@ -10,7 +10,7 @@ export type EmitEventName = { event: string; method: string } | string;
  * @returns {emitEvent}
  * @example useEmitEvent<IProps>(props, emit);
  */
-export function useEmitEvent<P extends Record<string, any>>(props: P, emit: (event: string, ...args: any[]) => void) {
+export function useEmitEvent<P extends Record<string, any>>(props: P, emit: (...args: any[]) => void) {
   return function emitEvent<T extends any[] = any[]>(eventName: string, ...args: T) {
     let emitEventMethodName = '';
     if (typeof eventName === 'string') {
diff --git a/src/slider/slider.vue b/src/slider/slider.vue
index 89ba0bb8..9e4690fb 100644
--- a/src/slider/slider.vue
+++ b/src/slider/slider.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { ref, toRefs, computed, SetupContext, reactive, defineComponent, getCurrentInstance } from 'vue';
+import { ref, toRefs, computed, reactive, defineComponent, getCurrentInstance } from 'vue';
 import config from '../config';
 import props from './props';
 import { useVModel } from '../shared/useVModel';
@@ -59,7 +59,7 @@ export default defineComponent({
   components: { TNode },
   props,
   emits: ['drag-start', 'drag-end', 'update:modelValue', 'change'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const rootRef = ref<HTMLElement | null>(null);
     const barRef = ref<HTMLElement | null>(null);
     const defaultValue = props.defaultValue || props.min;
diff --git a/src/stepper/stepper.vue b/src/stepper/stepper.vue
index 418943f9..3b12813d 100644
--- a/src/stepper/stepper.vue
+++ b/src/stepper/stepper.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, computed, defineComponent, SetupContext, nextTick } from 'vue';
+import { toRefs, computed, defineComponent, nextTick } from 'vue';
 import { AddIcon, RemoveIcon } from 'tdesign-icons-vue-next';
 import config from '../config';
 import StepperProps from './props';
@@ -39,7 +39,7 @@ export default defineComponent({
   },
   props: StepperProps,
   emits: ['update:value', 'update:modelValue', 'blur', 'change', 'overlimit'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const [stepperValue] = useDefault<number, TdStepperProps>(props, context.emit, 'value', 'change');
     const emitEvent = useEmitEvent(props, context.emit);
 
diff --git a/src/steps/steps.vue b/src/steps/steps.vue
index c9f68243..98766bc7 100644
--- a/src/steps/steps.vue
+++ b/src/steps/steps.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, provide, computed, SetupContext, defineComponent, reactive, ComponentInternalInstance } from 'vue';
+import { toRefs, provide, computed, defineComponent, reactive, ComponentInternalInstance } from 'vue';
 import StepsProps from './props';
 import TStepItem from './step-item.vue';
 import config from '../config';
@@ -30,7 +30,7 @@ export default defineComponent({
   },
   props: StepsProps,
   emits: ['update:current', 'update:modelValue', 'change'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const baseClass = computed(() => [
       name,
       `${name}--${props.layout}`,
diff --git a/src/swipe-cell/demos/bind.vue b/src/swipe-cell/demos/bind.vue
index 9a32205b..297fe97d 100644
--- a/src/swipe-cell/demos/bind.vue
+++ b/src/swipe-cell/demos/bind.vue
@@ -1,9 +1,9 @@
 <template>
   <tdesign-demo-block summary="通过expanded实现父子组件联动">
     <t-cell title="开关">
-      <t-switch :value="initData.expanded === 'right'" @change="(value) => handleChangeSwitch(value)" />
+      <t-switch :value="initData.expanded === 'right'" @change="(value: any) => handleChangeSwitch(value)" />
     </t-cell>
-    <t-swipe-cell :expanded="initData.expanded" @change="(value) => handleChange(value)">
+    <t-swipe-cell :expanded="initData.expanded" @change="(value:any) => handleChange(value)">
       <t-cell title="父子组件联动" />
       <template #right>
         <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
diff --git a/src/swipe-cell/demos/btns.vue b/src/swipe-cell/demos/btns.vue
index a09412c3..203d9f1a 100644
--- a/src/swipe-cell/demos/btns.vue
+++ b/src/swipe-cell/demos/btns.vue
@@ -3,27 +3,20 @@
     <t-swipe-cell>
       <t-cell title="左右都有菜单"></t-cell>
       <template #left>
-        <t-button theme="theme">选择</t-button>
+        <t-button theme="primary" @click="handleClickLeft">选择</t-button>
       </template>
       <template #right>
-        <div>
-          <t-button theme="theme">收藏</t-button>
-          <t-button theme="danger">删除</t-button>
-        </div>
+        <t-button theme="default" @click="handleClick">收藏</t-button>
+        <t-button theme="danger" @click="handleClick">删除</t-button>
       </template>
     </t-swipe-cell>
   </tdesign-demo-block>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
 import Toast from '../../toast/index';
 import { SwipeActionItem } from '../type';
 
-const initData = reactive({
-  showDialog: false,
-  disabled: false,
-});
 const handleClick = (value: { action: SwipeActionItem; source: String }) => {
   Toast(JSON.stringify(value));
 };
diff --git a/src/swipe-cell/demos/disabled.vue b/src/swipe-cell/demos/disabled.vue
index 277a51fc..4d72e72f 100644
--- a/src/swipe-cell/demos/disabled.vue
+++ b/src/swipe-cell/demos/disabled.vue
@@ -1,7 +1,7 @@
 <template>
   <tdesign-demo-block summary="是否启用滑动功能">
     <t-cell title="开关">
-      <t-switch v-model="initData.disabled" @change="(value) => handleChange(value)"> </t-switch>
+      <t-switch v-model="initData.disabled" @change="(value:any) => handleChange(value)"> </t-switch>
     </t-cell>
     <t-swipe-cell :disabled="initData.disabled">
       <t-cell :title="initData.disabled ? '禁止滑动' : '可以滑动'"></t-cell>
diff --git a/src/swipe-cell/demos/left-more-menu.vue b/src/swipe-cell/demos/left-more-menu.vue
index d7a4d57e..2eae8bf8 100644
--- a/src/swipe-cell/demos/left-more-menu.vue
+++ b/src/swipe-cell/demos/left-more-menu.vue
@@ -1,30 +1,41 @@
 <template>
   <tdesign-demo-block summary="左滑多操作">
-    <t-swipe-cell>
-      <t-cell title="列表-左滑多操作" note="多操作"></t-cell>
-      <template #right>
-        <t-button theme="primary" shape="square" @click="handleClick">收藏</t-button>
-        <t-button theme="warning" shape="square" @click="handleClick">编辑</t-button>
-        <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-      </template>
+    <t-swipe-cell :right="initData.btns" @click="(value:any) => handleClickBtns(value)">
+      <t-cell title="列表-左滑双操作" note="多操作"></t-cell>
     </t-swipe-cell>
   </tdesign-demo-block>
   <tdesign-demo-block style="margin-top: 10px">
-    <t-swipe-cell expanded="right">
-      <t-cell title="列表-左滑多操作" note="多操作"></t-cell>
-      <template #right>
-        <t-button theme="primary" shape="square" @click="handleClick">收藏</t-button>
-        <t-button theme="warning" shape="square" @click="handleClick">编辑</t-button>
-        <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-      </template>
+    <t-swipe-cell :right="initData.btns" expanded="right" @click="(value:any) => handleClickBtns(value)">
+      <t-cell title="列表-左滑双操作" note="多操作"></t-cell>
     </t-swipe-cell>
   </tdesign-demo-block>
 </template>
 
 <script setup lang="ts">
+import { reactive } from 'vue';
 import Toast from '../../toast/index';
+import { SwipeActionItem } from '../type';
 
-const handleClick = () => {
-  Toast('click');
+interface InitData {
+  btns: {}[];
+}
+const handleCollect = () => {
+  Toast.success(`收藏成功`);
 };
+const handleEdit = () => {
+  Toast.success(`编辑成功`);
+};
+const handleDelete = () => {
+  Toast.success(`删除成功`);
+};
+const handleClickBtns = (value: { action: SwipeActionItem; source: String }) => {
+  Toast(JSON.stringify(value));
+};
+const initData: InitData = reactive({
+  btns: [
+    { text: '收藏', className: 't-button--warning', onClick: handleCollect },
+    { text: '编辑', className: 't-button--primary', onClick: handleEdit },
+    { text: '删除', className: 't-button--danger', onClick: handleDelete },
+  ],
+});
 </script>
diff --git a/src/swipe-cell/demos/left-two-menu.vue b/src/swipe-cell/demos/left-two-menu.vue
index 3e420ef7..4c3a55b0 100644
--- a/src/swipe-cell/demos/left-two-menu.vue
+++ b/src/swipe-cell/demos/left-two-menu.vue
@@ -1,11 +1,11 @@
 <template>
   <tdesign-demo-block summary="左滑双操作">
-    <t-swipe-cell :right="initData.btns" @click="(value) => handleClickBtns(value)">
+    <t-swipe-cell :right="initData.btns" @click="(value: any) => handleClickBtns(value)">
       <t-cell title="列表-左滑双操作" note="双操作"></t-cell>
     </t-swipe-cell>
   </tdesign-demo-block>
   <tdesign-demo-block style="margin-top: 10px">
-    <t-swipe-cell :right="initData.btns" expanded="right" @click="(value) => handleClickBtns(value)">
+    <t-swipe-cell :right="initData.btns" expanded="right" @click="(value: any) => handleClickBtns(value)">
       <t-cell title="列表-左滑双操作" note="双操作"></t-cell>
     </t-swipe-cell>
   </tdesign-demo-block>
diff --git a/src/swipe-cell/swipe-cell.vue b/src/swipe-cell/swipe-cell.vue
index e73cc09f..1d21a380 100644
--- a/src/swipe-cell/swipe-cell.vue
+++ b/src/swipe-cell/swipe-cell.vue
@@ -57,17 +57,7 @@
 
 <script lang="ts">
 import { onClickOutside, useSwipe } from '@vueuse/core';
-import {
-  ref,
-  watch,
-  toRefs,
-  reactive,
-  computed,
-  onMounted,
-  SetupContext,
-  defineComponent,
-  getCurrentInstance,
-} from 'vue';
+import { ref, watch, toRefs, reactive, computed, onMounted, defineComponent, getCurrentInstance } from 'vue';
 import props from './props';
 import config from '../config';
 import TButton from '../button';
@@ -90,7 +80,7 @@ export default defineComponent({
   components: { TNode, TButton },
   props,
   emits: ['click', 'change'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const internalInstance = getCurrentInstance();
     const swipeContent = computed(() => renderContent(internalInstance, 'default', 'content'));
diff --git a/src/swiper/swiper.vue b/src/swiper/swiper.vue
index 9024226b..33f8ff58 100644
--- a/src/swiper/swiper.vue
+++ b/src/swiper/swiper.vue
@@ -52,7 +52,6 @@ import {
   computed,
   watch,
   ref,
-  SetupContext,
   nextTick,
   provide,
   ComponentInternalInstance,
@@ -76,7 +75,7 @@ export default defineComponent({
   components: { ChevronLeftIcon, ChevronRightIcon, TNode },
   props: SwiperProps,
   emits: ['change', 'update:current', 'update:modelValue'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     // const emitEvent = useEmitEvent(props, context.emit);
     const [swiperValue, setSwiperValue] = useDefault<Number, TdSwiperProps>(props, context.emit, 'current', 'change');
     const self = getCurrentInstance();
diff --git a/src/switch/switch.vue b/src/switch/switch.vue
index 8a3e8f35..18ce4616 100644
--- a/src/switch/switch.vue
+++ b/src/switch/switch.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { computed, toRefs, defineComponent, SetupContext } from 'vue';
+import { computed, toRefs, defineComponent } from 'vue';
 import { useToggle, useDefault } from '../shared';
 import config from '../config';
 import SwitchProps from './props';
@@ -22,7 +22,7 @@ export default defineComponent({
   name,
   props: SwitchProps,
   emits: ['change', 'update:value', 'update:modelValue'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const switchValues = props.customValue || [true, false];
     const [innerValue] = useDefault<SwitchValue, TdSwitchProps>(props, context.emit, 'value', 'change');
     const { state, toggle } = useToggle<SwitchValue>(switchValues, innerValue.value);
diff --git a/src/tab-bar/tab-bar.vue b/src/tab-bar/tab-bar.vue
index 01d900c3..44e2ad8f 100644
--- a/src/tab-bar/tab-bar.vue
+++ b/src/tab-bar/tab-bar.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, provide, Ref, computed, SetupContext } from 'vue';
+import { defineComponent, ref, provide, Ref, computed } from 'vue';
 import TabBarProps from './props';
 import config from '../config';
 import { useDefault } from '../shared';
@@ -17,7 +17,7 @@ export default defineComponent({
   name,
   props: TabBarProps,
   emits: ['update:value', 'update:modelValue', 'change'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const [activeValue] = useDefault(props, context.emit, 'value', 'change');
     const defaultIndex: Ref<number> = ref(-1);
 
diff --git a/src/tabs/tabs.vue b/src/tabs/tabs.vue
index 6f754c20..7dae9315 100644
--- a/src/tabs/tabs.vue
+++ b/src/tabs/tabs.vue
@@ -35,7 +35,6 @@ import {
   provide,
   ref,
   toRefs,
-  SetupContext,
   nextTick,
   onBeforeUnmount,
   readonly,
@@ -56,7 +55,7 @@ export default defineComponent({
   components: { TabNavItem, TSticky },
   props: TabsProps,
   emits: ['update:value', 'update:modelValue'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const placement = computed(() => props.placement);
     const showBottomLine = computed(() => props.showBottomLine);
     const stickyProps = computed(() => ({ disabled: true, ...props.stickyProps }));
diff --git a/src/tag/check-tag.vue b/src/tag/check-tag.vue
index a470d6cb..251e6954 100644
--- a/src/tag/check-tag.vue
+++ b/src/tag/check-tag.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { CloseIcon } from 'tdesign-icons-vue-next';
-import { defineComponent, computed, toRefs, getCurrentInstance, SetupContext } from 'vue';
+import { defineComponent, computed, toRefs, getCurrentInstance } from 'vue';
 import config from '../config';
 import CheckTagProps from './check-tag-props';
 import { useEmitEvent, renderContent, renderTNode, TNode, useVModel } from '../shared';
@@ -30,7 +30,7 @@ const CheckTag = defineComponent({
   },
   props: CheckTagProps,
   emits: ['change', 'click', 'update:checked', 'update:modelValue'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const internalInstance = getCurrentInstance();
     const tagContent = computed(() => renderContent(internalInstance, 'default', 'content'));
@@ -49,8 +49,8 @@ const CheckTag = defineComponent({
     const classes = computed(() => [
       `${baseClass}`,
       `${baseClass}--checkable`,
-      `${baseClass}--shape-${props.shape}`,
-      `${baseClass}--size-${props.size}`,
+      `${baseClass}--${props.shape}`,
+      `${baseClass}--${props.size}`,
       {
         [`${prefix}-is-closable ${baseClass}--closable`]: props.closable,
         [`${prefix}-is-disabled ${baseClass}--disabled`]: props.disabled,
diff --git a/src/tag/tag.vue b/src/tag/tag.vue
index 289b85bb..a1355ced 100644
--- a/src/tag/tag.vue
+++ b/src/tag/tag.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { CloseIcon } from 'tdesign-icons-vue-next';
-import { defineComponent, computed, getCurrentInstance, SetupContext } from 'vue';
+import { defineComponent, computed, getCurrentInstance } from 'vue';
 import config from '../config';
 import TagProps from './props';
 import { useEmitEvent, renderContent, renderTNode, TNode } from '../shared';
@@ -30,7 +30,7 @@ const Tag = defineComponent({
   },
   props: TagProps,
   emits: ['close', 'click'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const internalInstance = getCurrentInstance();
     const tagContent = computed(() => renderContent(internalInstance, 'default', 'content'));
@@ -45,10 +45,10 @@ const Tag = defineComponent({
 
     const classes = computed(() => [
       `${baseClass}`,
-      `${baseClass}--theme-${props.theme}`,
-      `${baseClass}--shape-${props.shape}`,
-      `${baseClass}--variant-${props.variant}`,
-      `${baseClass}--size-${props.size}`,
+      `${baseClass}--${props.theme}`,
+      `${baseClass}--${props.shape}`,
+      `${baseClass}--${props.variant}`,
+      `${baseClass}--${props.size}`,
       {
         [`${prefix}-is-closable ${baseClass}--closable`]: props.closable,
         [`${prefix}-is-disabled ${baseClass}--disabled`]: props.disabled,
diff --git a/src/textarea/textarea.vue b/src/textarea/textarea.vue
index 45d533bd..7e056506 100644
--- a/src/textarea/textarea.vue
+++ b/src/textarea/textarea.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ref, onMounted, defineComponent, getCurrentInstance, toRefs, SetupContext, nextTick } from 'vue';
+import { computed, ref, onMounted, defineComponent, getCurrentInstance, toRefs, nextTick } from 'vue';
 import { useEmitEvent, renderTNode, TNode, getCharacterLength, useVModel } from '../shared';
 import config from '../config';
 import TextareaProps from './props';
@@ -42,7 +42,7 @@ export default defineComponent({
   },
   props: TextareaProps,
   emits: ['update:value', 'update:modelValue', 'focus', 'blur', 'change'],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const textareaRef = ref<null | HTMLElement>(null);
     const textareaStyle = ref();
diff --git a/src/toast/demos/icon.vue b/src/toast/demos/icon.vue
deleted file mode 100644
index 728e89d8..00000000
--- a/src/toast/demos/icon.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="toast-demo">
-    <t-button theme="primary" @click="showSuccess">成功</t-button>
-    <t-button theme="primary" @click="showFail">警告</t-button>
-    <t-button theme="primary" style="margin-top: 8px" @click="showLoading">加载</t-button>
-    <t-button theme="primary" style="margin-top: 8px" @click="showCustom">自定义图标</t-button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { h } from 'vue';
-import { UserIcon } from 'tdesign-icons-vue-next';
-import { Toast } from 'tdesign-mobile-vue';
-
-const showSuccess = () => Toast.success();
-const showFail = () => Toast.fail();
-const showLoading = () => Toast.loading();
-const showCustom = () => Toast({ icon: () => h(UserIcon) });
-</script>
diff --git a/src/toast/demos/position.vue b/src/toast/demos/position.vue
index 46f8712e..3bfb8d74 100644
--- a/src/toast/demos/position.vue
+++ b/src/toast/demos/position.vue
@@ -14,8 +14,8 @@
 
 <script setup lang="ts">
 import { h } from 'vue';
-import { Toast } from 'tdesign-mobile-vue';
 import { StarIcon } from 'tdesign-icons-vue-next';
+import { Toast } from 'tdesign-mobile-vue';
 
 type Placement = 'top' | 'middle' | 'bottom';
 
diff --git a/src/toast/demos/preventScrollThrough.vue b/src/toast/demos/preventScrollThrough.vue
index 5f6231ba..b0e34bde 100644
--- a/src/toast/demos/preventScrollThrough.vue
+++ b/src/toast/demos/preventScrollThrough.vue
@@ -6,8 +6,8 @@
 
 <script setup lang="ts">
 import { h } from 'vue';
-import { Toast } from 'tdesign-mobile-vue';
 import { PoweroffIcon } from 'tdesign-icons-vue-next';
+import { Toast } from 'tdesign-mobile-vue';
 
 const showPreventScrollThrough = () => {
   Toast({
diff --git a/src/toast/demos/text.vue b/src/toast/demos/text.vue
index 2fa72a6d..e7acd2a2 100644
--- a/src/toast/demos/text.vue
+++ b/src/toast/demos/text.vue
@@ -9,8 +9,8 @@
 
 <script setup lang="ts">
 import { h, ref } from 'vue';
-import { Toast } from 'tdesign-mobile-vue';
 import { UserIcon } from 'tdesign-icons-vue-next';
+import { Toast } from 'tdesign-mobile-vue';
 
 const text1 = ref('轻提示文字内容');
 const text2 = ref('最多一行展示十个汉字宽度限制最多不超过三行文字行文字行文字');
diff --git a/src/toast/index.ts b/src/toast/index.ts
index 6be94d6f..860890cd 100644
--- a/src/toast/index.ts
+++ b/src/toast/index.ts
@@ -76,7 +76,7 @@ function parseOptions(message?: Partial<TdToastProps> | string) {
 Toast.install = (app: App) => {
   // 添加插件入口
   // eslint-disable-next-line no-param-reassign
-  app.config.globalProperties.$toast = Toast;
+  app.config.globalProperties.$toast = Toast as any;
 };
 
 type ToastApi = {
diff --git a/src/upload/upload.vue b/src/upload/upload.vue
index ce3593b0..0fcd8ece 100644
--- a/src/upload/upload.vue
+++ b/src/upload/upload.vue
@@ -50,7 +50,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, SetupContext, getCurrentInstance, ref, Ref, toRefs, computed, ComputedRef } from 'vue';
+import { defineComponent, getCurrentInstance, ref, Ref, toRefs, computed, ComputedRef } from 'vue';
 import { AddIcon, CloseIcon, RefreshIcon } from 'tdesign-icons-vue-next';
 import findIndex from 'lodash/findIndex';
 import isObject from 'lodash/isObject';
@@ -90,7 +90,7 @@ export default defineComponent({
     'success',
     'select-change',
   ],
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const [innerFiles, setInnerFiles] = useDefault<TdUploadProps['files'], TdUploadProps>(
       props,
diff --git a/tsconfig.build.json b/tsconfig.build.json
deleted file mode 100644
index fbc8ee86..00000000
--- a/tsconfig.build.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "extends": "./tsconfig",
-  "exclude": [
-    "site",
-    "scripts",
-    "./src/dropdown-menu",
-    "./src/_common",
-    "./**/demos/*",
-    "node_modules",
-    "vite.config.ts",
-    "./es/**/*"
-  ]
-}
diff --git a/tsconfig.json b/tsconfig.json
index 0d1c4e74..8e571afa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,10 +19,10 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "skipLibCheck": true,
-    "baseUrl": ".",
+    "baseUrl": "./",
     "paths": {
-      "@/*": ["./src/*"],
-      "tdesign-moile-vue": ["./src/*"]
+      "@/*": ["src/*"],
+      "tdesign-mobile-vue": ["src"]
     },
     "types": ["vitest/globals"],
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
@@ -37,5 +37,5 @@
     "src/style/index.js",
     "scripts/rollup.config.js"
   ],
-  "exclude": ["node_modules", "src/_common", "dist", "es", "lib", "site"]
+  "exclude": ["node_modules", "src/_common", "dist", "es", "esm", "lib", "site"]
 }


Test patch:
diff --git a/src/back-top/__test__/__snapshots__/demo.test.jsx.snap b/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
index e2943e6f..9ee9e45a 100644
--- a/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,168 +1,5 @@
 // Vitest Snapshot v1
 
-exports[`BackTop > BackTop baseVue demo works fine 1`] = `
-<div
-  data-v-33e4f6e7=""
->
-  <div
-    class="button-group"
-    data-v-33e4f6e7=""
-  >
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-      data-v-33e4f6e7=""
-      role="button"
-    >
-      <!---->
-      <span
-        class="t-button__text"
-      >
-        
-        圆角白底
-        
-      </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-      data-v-33e4f6e7=""
-      role="button"
-    >
-      <!---->
-      <span
-        class="t-button__text"
-      >
-        
-        圆角黑底
-        
-      </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-      data-v-33e4f6e7=""
-      role="button"
-    >
-      <!---->
-      <span
-        class="t-button__text"
-      >
-        
-        圆白底纯图标
-        
-      </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-      data-v-33e4f6e7=""
-      role="button"
-    >
-      <!---->
-      <span
-        class="t-button__text"
-      >
-        
-        圆黑底纯图标
-        
-      </span>
-    </button>
-  </div>
-  <p
-    class="tdesign-mobile-demo-block__summary"
-    data-v-33e4f6e7=""
-  >
-    半圆型返回顶部
-  </p>
-  <div
-    class="button-group"
-    data-v-33e4f6e7=""
-  >
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-      data-v-33e4f6e7=""
-      role="button"
-    >
-      <!---->
-      <span
-        class="t-button__text"
-      >
-        
-        半圆白底
-        
-      </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-      data-v-33e4f6e7=""
-      role="button"
-    >
-      <!---->
-      <span
-        class="t-button__text"
-      >
-        
-        半圆黑底
-        
-      </span>
-    </button>
-  </div>
-  <div
-    class="t-back-top t-is-fixed t-back-top--round"
-    data-v-33e4f6e7=""
-    style="display: none;"
-  >
-    <svg
-      class="t-icon t-icon-backtop"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M2 3h12V2H2v1zM3.38 10.23l4.1-4.03v8.64H8.5V6.2l4.18 4.08.71-.7-5.05-4.93a.5.5 0 00-.7 0l-4.98 4.9.72.69z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    <span
-      class="t-back-top__text"
-      style="min-width: 12px; max-width: 24px; width: auto; display: inline-block;"
-    >
-      顶部
-    </span>
-  </div>
-  <div
-    class="t-back-top t-is-fixed t-back-top--round"
-    data-v-33e4f6e7=""
-    style="display: none;"
-  >
-    <svg
-      class="t-icon t-icon-backtop"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M2 3h12V2H2v1zM3.38 10.23l4.1-4.03v8.64H8.5V6.2l4.18 4.08.71-.7-5.05-4.93a.5.5 0 00-.7 0l-4.98 4.9.72.69z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    <span
-      class="t-back-top__text"
-      style="min-width: 12px; max-width: 24px; width: auto; display: inline-block;"
-    >
-      返回顶部
-    </span>
-  </div>
-</div>
-`;
-
 exports[`BackTop > BackTop halfRoundVue demo works fine 1`] = `
 <div
   data-v-app=""
@@ -739,76 +576,3 @@ exports[`BackTop > BackTop roundVue demo works fine 1`] = `
   
 </div>
 `;
-
-exports[`BackTop > BackTop targetVue demo works fine 1`] = `
-<div>
-  <span />
-  <div
-    class="tdesign-demo-block"
-  >
-    <div
-      class="t-back-top t-is-fixed t-back-top--round"
-      style="display: none;"
-    >
-      <svg
-        class="t-icon t-icon-backtop"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M2 3h12V2H2v1zM3.38 10.23l4.1-4.03v8.64H8.5V6.2l4.18 4.08.71-.7-5.05-4.93a.5.5 0 00-.7 0l-4.98 4.9.72.69z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-      <!--v-if-->
-    </div>
-  </div>
-</div>
-`;
-
-exports[`BackTop > BackTop themeVue demo works fine 1`] = `
-<div>
-  <div
-    class="tdesign-demo-block"
-  >
-    <div
-      class="t-back-top t-is-fixed t-back-top--half-round-dark"
-      style="display: none;"
-    >
-      <svg
-        class="t-icon t-icon-backtop"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M2 3h12V2H2v1zM3.38 10.23l4.1-4.03v8.64H8.5V6.2l4.18 4.08.71-.7-5.05-4.93a.5.5 0 00-.7 0l-4.98 4.9.72.69z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-      <!--v-if-->
-    </div>
-    <div
-      class="t-back-top t-is-fixed t-back-top--round"
-      style="display: none;"
-    >
-      
-      <div>
-        图标
-      </div>
-      
-      <span
-        class="t-back-top__text"
-        style="min-width: 12px; max-width: 24px; width: auto; display: inline-block;"
-      >
-        顶部
-      </span>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/back-top/__test__/demo.test.jsx b/src/back-top/__test__/demo.test.jsx
index b943857c..8feaaede 100644
--- a/src/back-top/__test__/demo.test.jsx
+++ b/src/back-top/__test__/demo.test.jsx
@@ -3,20 +3,14 @@
  */
 
 import { mount } from '@vue/test-utils';
-import baseVue from '@/back-top/demos/base.vue';
 import halfRoundVue from '@/back-top/demos/half-round.vue';
 import mobileVue from '@/back-top/demos/mobile.vue';
 import roundVue from '@/back-top/demos/round.vue';
-import targetVue from '@/back-top/demos/target.vue';
-import themeVue from '@/back-top/demos/theme.vue';
 
 const mapper = {
-  baseVue,
   halfRoundVue,
   mobileVue,
   roundVue,
-  targetVue,
-  themeVue,
 };
 
 describe('BackTop', () => {
diff --git a/src/checkbox/__test__/__snapshots__/demo.test.jsx.snap b/src/checkbox/__test__/__snapshots__/demo.test.jsx.snap
index 3ebd6008..c5e0df78 100644
--- a/src/checkbox/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/checkbox/__test__/__snapshots__/demo.test.jsx.snap
@@ -739,11 +739,9 @@ exports[`Checkbox > Checkbox iconVue demo works fine 1`] = `
             width="1em"
           >
             <path
-              clip-rule="evenodd"
-              d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1V3h10v10H3z"
+              d="M3 14h10a1 1 0 001-1V3a1 1 0 00-1-1H3a1 1 0 00-1 1v10a1 1 0 001 1zm0-1V3h10v10H3z"
               fill="currentColor"
               fill-opacity="0.9"
-              fill-rule="evenodd"
             />
           </svg>
         </span>
@@ -2257,11 +2255,9 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   width="1em"
                 >
                   <path
-                    clip-rule="evenodd"
-                    d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1V3h10v10H3z"
+                    d="M3 14h10a1 1 0 001-1V3a1 1 0 00-1-1H3a1 1 0 00-1 1v10a1 1 0 001 1zm0-1V3h10v10H3z"
                     fill="currentColor"
                     fill-opacity="0.9"
-                    fill-rule="evenodd"
                   />
                 </svg>
               </span>
diff --git a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
index 930c5f99..3a342b9c 100644
--- a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -119,14 +119,9 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, -280px, 0);"
+                    style="transform: translate3d(0, -240px, 0);"
                   >
                     
-                    <li
-                      class="t-picker-item__item"
-                    >
-                      2012
-                    </li>
                     <li
                       class="t-picker-item__item"
                     >
@@ -227,6 +222,11 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                     >
                       2032
                     </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2033
+                    </li>
                     
                   </ul>
                 </div>
@@ -1018,14 +1018,9 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, -240px, 0);"
+                    style="transform: translate3d(0, -200px, 0);"
                   >
                     
-                    <li
-                      class="t-picker-item__item"
-                    >
-                      2012
-                    </li>
                     <li
                       class="t-picker-item__item"
                     >
@@ -1126,6 +1121,11 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
                     >
                       2032
                     </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2033
+                    </li>
                     
                   </ul>
                 </div>
@@ -2282,14 +2282,9 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, -280px, 0);"
+                      style="transform: translate3d(0, -240px, 0);"
                     >
                       
-                      <li
-                        class="t-picker-item__item"
-                      >
-                        2012
-                      </li>
                       <li
                         class="t-picker-item__item"
                       >
@@ -2390,6 +2385,11 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                       >
                         2032
                       </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2033
+                      </li>
                       
                     </ul>
                   </div>
@@ -2762,14 +2762,9 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, -280px, 0);"
+                      style="transform: translate3d(0, -240px, 0);"
                     >
                       
-                      <li
-                        class="t-picker-item__item"
-                      >
-                        2012
-                      </li>
                       <li
                         class="t-picker-item__item"
                       >
@@ -2870,6 +2865,11 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                       >
                         2032
                       </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2033
+                      </li>
                       
                     </ul>
                   </div>
@@ -4651,14 +4651,9 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, -280px, 0);"
+                    style="transform: translate3d(0, -240px, 0);"
                   >
                     
-                    <li
-                      class="t-picker-item__item"
-                    >
-                      2012
-                    </li>
                     <li
                       class="t-picker-item__item"
                     >
@@ -4759,6 +4754,11 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
                     >
                       2032
                     </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2033
+                    </li>
                     
                   </ul>
                 </div>
diff --git a/src/loading/__test__/__snapshots__/demo.test.jsx.snap b/src/loading/__test__/__snapshots__/demo.test.jsx.snap
index 9180d0fc..ad373f96 100644
--- a/src/loading/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/loading/__test__/__snapshots__/demo.test.jsx.snap
@@ -46,15 +46,15 @@ exports[`Loading > Loading baseVue demo works fine 1`] = `
       height="1em"
       style="animation-duration: 800ms;"
       version="1.1"
-      viewBox="0 0 14 14"
+      viewBox="0 0 12 12"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <foreignobject
         height="12"
         width="12"
-        x="1"
-        y="1"
+        x="0"
+        y="0"
       >
         <div
           class="t-loading__gradient-conic"
@@ -198,15 +198,15 @@ exports[`Loading > Loading horzVue demo works fine 1`] = `
       height="1em"
       style="animation-duration: 800ms;"
       version="1.1"
-      viewBox="0 0 14 14"
+      viewBox="0 0 12 12"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <foreignobject
         height="12"
         width="12"
-        x="1"
-        y="1"
+        x="0"
+        y="0"
       >
         <div
           class="t-loading__gradient-conic"
@@ -334,15 +334,15 @@ exports[`Loading > Loading mobileVue demo works fine 1`] = `
           height="1em"
           style="animation-duration: 800ms;"
           version="1.1"
-          viewBox="0 0 14 14"
+          viewBox="0 0 12 12"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <foreignobject
             height="12"
             width="12"
-            x="1"
-            y="1"
+            x="0"
+            y="0"
           >
             <div
               class="t-loading__gradient-conic"
@@ -457,15 +457,15 @@ exports[`Loading > Loading mobileVue demo works fine 1`] = `
           height="1em"
           style="animation-duration: 800ms;"
           version="1.1"
-          viewBox="0 0 14 14"
+          viewBox="0 0 12 12"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <foreignobject
             height="12"
             width="12"
-            x="1"
-            y="1"
+            x="0"
+            y="0"
           >
             <div
               class="t-loading__gradient-conic"
@@ -573,15 +573,15 @@ exports[`Loading > Loading mobileVue demo works fine 1`] = `
             height="1em"
             style="animation-duration: 800ms;"
             version="1.1"
-            viewBox="0 0 14 14"
+            viewBox="0 0 12 12"
             width="1em"
             xmlns="http://www.w3.org/2000/svg"
           >
             <foreignobject
               height="12"
               width="12"
-              x="1"
-              y="1"
+              x="0"
+              y="0"
             >
               <div
                 class="t-loading__gradient-conic"
@@ -807,15 +807,15 @@ exports[`Loading > Loading mobileVue demo works fine 1`] = `
           height="1em"
           style="animation-duration: 300ms;"
           version="1.1"
-          viewBox="0 0 14 14"
+          viewBox="0 0 12 12"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <foreignobject
             height="12"
             width="12"
-            x="1"
-            y="1"
+            x="0"
+            y="0"
           >
             <div
               class="t-loading__gradient-conic"
@@ -924,15 +924,15 @@ exports[`Loading > Loading mobileVue demo works fine 1`] = `
             height="1em"
             style="animation-duration: 800ms;"
             version="1.1"
-            viewBox="0 0 14 14"
+            viewBox="0 0 12 12"
             width="1em"
             xmlns="http://www.w3.org/2000/svg"
           >
             <foreignobject
               height="12"
               width="12"
-              x="1"
-              y="1"
+              x="0"
+              y="0"
             >
               <div
                 class="t-loading__gradient-conic"
@@ -960,15 +960,15 @@ exports[`Loading > Loading mobileVue demo works fine 1`] = `
             height="1em"
             style="animation-duration: 800ms;"
             version="1.1"
-            viewBox="0 0 14 14"
+            viewBox="0 0 12 12"
             width="1em"
             xmlns="http://www.w3.org/2000/svg"
           >
             <foreignobject
               height="12"
               width="12"
-              x="1"
-              y="1"
+              x="0"
+              y="0"
             >
               <div
                 class="t-loading__gradient-conic"
@@ -996,15 +996,15 @@ exports[`Loading > Loading mobileVue demo works fine 1`] = `
             height="1em"
             style="animation-duration: 800ms;"
             version="1.1"
-            viewBox="0 0 14 14"
+            viewBox="0 0 12 12"
             width="1em"
             xmlns="http://www.w3.org/2000/svg"
           >
             <foreignobject
               height="12"
               width="12"
-              x="1"
-              y="1"
+              x="0"
+              y="0"
             >
               <div
                 class="t-loading__gradient-conic"
@@ -1106,15 +1106,15 @@ exports[`Loading > Loading sizeVue demo works fine 1`] = `
       height="1em"
       style="animation-duration: 800ms;"
       version="1.1"
-      viewBox="0 0 14 14"
+      viewBox="0 0 12 12"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <foreignobject
         height="12"
         width="12"
-        x="1"
-        y="1"
+        x="0"
+        y="0"
       >
         <div
           class="t-loading__gradient-conic"
@@ -1142,15 +1142,15 @@ exports[`Loading > Loading sizeVue demo works fine 1`] = `
       height="1em"
       style="animation-duration: 800ms;"
       version="1.1"
-      viewBox="0 0 14 14"
+      viewBox="0 0 12 12"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <foreignobject
         height="12"
         width="12"
-        x="1"
-        y="1"
+        x="0"
+        y="0"
       >
         <div
           class="t-loading__gradient-conic"
@@ -1178,15 +1178,15 @@ exports[`Loading > Loading sizeVue demo works fine 1`] = `
       height="1em"
       style="animation-duration: 800ms;"
       version="1.1"
-      viewBox="0 0 14 14"
+      viewBox="0 0 12 12"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <foreignobject
         height="12"
         width="12"
-        x="1"
-        y="1"
+        x="0"
+        y="0"
       >
         <div
           class="t-loading__gradient-conic"
@@ -1222,15 +1222,15 @@ exports[`Loading > Loading speedVue demo works fine 1`] = `
       height="1em"
       style="animation-duration: 300ms;"
       version="1.1"
-      viewBox="0 0 14 14"
+      viewBox="0 0 12 12"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <foreignobject
         height="12"
         width="12"
-        x="1"
-        y="1"
+        x="0"
+        y="0"
       >
         <div
           class="t-loading__gradient-conic"
@@ -1317,15 +1317,15 @@ exports[`Loading > Loading vertVue demo works fine 1`] = `
       height="1em"
       style="animation-duration: 800ms;"
       version="1.1"
-      viewBox="0 0 14 14"
+      viewBox="0 0 12 12"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <foreignobject
         height="12"
         width="12"
-        x="1"
-        y="1"
+        x="0"
+        y="0"
       >
         <div
           class="t-loading__gradient-conic"
diff --git a/src/picker/__test__/__snapshots__/demo.test.jsx.snap b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
index e1ae6b3f..916ee36a 100644
--- a/src/picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -390,9 +390,14 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
               >
                 <ul
                   class="t-picker-item__wrapper"
-                  style="transform: translate3d(0, 40px, 0);"
+                  style="transform: translate3d(0, 0px, 0);"
                 >
                   
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    2023
+                  </li>
                   <li
                     class="t-picker-item__item"
                   >
@@ -438,11 +443,6 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
                   >
                     2014
                   </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    2013
-                  </li>
                   
                 </ul>
               </div>
@@ -583,6 +583,11 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
                   
                   <li
                     class="t-picker-item__item t-picker-item__item--selected"
+                  >
+                    2023
+                  </li>
+                  <li
+                    class="t-picker-item__item"
                   >
                     2022
                   </li>
@@ -626,11 +631,6 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
                   >
                     2014
                   </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    2013
-                  </li>
                   
                 </ul>
               </div>
@@ -1514,9 +1514,14 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 40px, 0);"
+                    style="transform: translate3d(0, 0px, 0);"
                   >
                     
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2023
+                    </li>
                     <li
                       class="t-picker-item__item"
                     >
@@ -1562,11 +1567,6 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
                     >
                       2014
                     </li>
-                    <li
-                      class="t-picker-item__item"
-                    >
-                      2013
-                    </li>
                     
                   </ul>
                 </div>
@@ -1707,6 +1707,11 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
                     
                     <li
                       class="t-picker-item__item t-picker-item__item--selected"
+                    >
+                      2023
+                    </li>
+                    <li
+                      class="t-picker-item__item"
                     >
                       2022
                     </li>
@@ -1750,11 +1755,6 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
                     >
                       2014
                     </li>
-                    <li
-                      class="t-picker-item__item"
-                    >
-                      2013
-                    </li>
                     
                   </ul>
                 </div>
diff --git a/src/steps/__test__/__snapshots__/demo.test.jsx.snap b/src/steps/__test__/__snapshots__/demo.test.jsx.snap
index 13d90c89..6b286a2f 100644
--- a/src/steps/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/steps/__test__/__snapshots__/demo.test.jsx.snap
@@ -4463,42 +4463,6 @@ exports[`Steps > Steps mobileVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="t-step"
-        >
-          <div
-            class="t-step__inner"
-          >
-            <div
-              class="t-step-icon"
-            >
-              <div
-                class="t-step-icon__number"
-              >
-                4
-              </div>
-            </div>
-            <div
-              class="t-step-content"
-            >
-              <div
-                class="t-step-title"
-              >
-                未完成步骤
-              </div>
-              <div
-                class="t-step-description"
-              >
-                辅助信息文字最多两行
-              </div>
-              <div
-                class="t-step-extra"
-              >
-                <!---->
-              </div>
-            </div>
-          </div>
-        </div>
         
       </div>
     </div>
@@ -5095,7 +5059,7 @@ exports[`Steps > Steps verticalReadonlyVue demo works fine 1`] = `
           class="t-step-icon"
         >
           <div
-            class="t-step-icon__number t-step-icon__dot"
+            class="t-step-icon__number"
           >
             <svg
               class="t-icon t-icon-check"
@@ -5118,7 +5082,7 @@ exports[`Steps > Steps verticalReadonlyVue demo works fine 1`] = `
           <div
             class="t-step-title"
           >
-            事件描述
+            已完成步骤
           </div>
           <div
             class="t-step-description"
@@ -5144,9 +5108,9 @@ exports[`Steps > Steps verticalReadonlyVue demo works fine 1`] = `
           class="t-step-icon"
         >
           <div
-            class="t-step-icon__number t-step-icon__dot"
+            class="t-step-icon__number"
           >
-            
+            2
           </div>
         </div>
         <div
@@ -5155,7 +5119,7 @@ exports[`Steps > Steps verticalReadonlyVue demo works fine 1`] = `
           <div
             class="t-step-title"
           >
-            事件描述
+            当前步骤
           </div>
           <div
             class="t-step-description"
@@ -5181,9 +5145,9 @@ exports[`Steps > Steps verticalReadonlyVue demo works fine 1`] = `
           class="t-step-icon"
         >
           <div
-            class="t-step-icon__number t-step-icon__dot"
+            class="t-step-icon__number"
           >
-            
+            3
           </div>
         </div>
         <div
@@ -5192,7 +5156,7 @@ exports[`Steps > Steps verticalReadonlyVue demo works fine 1`] = `
           <div
             class="t-step-title"
           >
-            事件描述
+            未完成步骤
           </div>
           <div
             class="t-step-description"
diff --git a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
index 667c00d6..53792614 100644
--- a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
@@ -138,7 +138,7 @@ exports[`SwipeCell > SwipeCell btnsVue demo works fine 1`] = `
         
         <button
           aria-disabled="false"
-          class="t-button t-size-m t-button--base t-button--theme t-button--shape-rectangle"
+          class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
           role="button"
         >
           <!---->
@@ -184,36 +184,34 @@ exports[`SwipeCell > SwipeCell btnsVue demo works fine 1`] = `
         style="width: auto;"
       >
         
-        <div>
-          <button
-            aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--theme t-button--shape-rectangle"
-            role="button"
+        <button
+          aria-disabled="false"
+          class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+          role="button"
+        >
+          <!---->
+          <span
+            class="t-button__text"
           >
-            <!---->
-            <span
-              class="t-button__text"
-            >
-              
-              收藏
-              
-            </span>
-          </button>
-          <button
-            aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--danger t-button--shape-rectangle"
-            role="button"
+            
+            收藏
+            
+          </span>
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-size-m t-button--base t-button--danger t-button--shape-rectangle"
+          role="button"
+        >
+          <!---->
+          <span
+            class="t-button__text"
           >
-            <!---->
-            <span
-              class="t-button__text"
-            >
-              
-              删除
-              
-            </span>
-          </button>
-        </div>
+            
+            删除
+            
+          </span>
+        </button>
         
         
         
@@ -762,7 +760,7 @@ exports[`SwipeCell > SwipeCell leftMoreMenuVue demo works fine 1`] = `
             <div
               class="t-cell__title"
             >
-              列表-左滑多操作
+              列表-左滑双操作
               <!--v-if-->
               <!--v-if-->
             </div>
@@ -780,10 +778,13 @@ exports[`SwipeCell > SwipeCell leftMoreMenuVue demo works fine 1`] = `
           style="width: auto;"
         >
           
+          
+          
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-square"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--warning"
             role="button"
+            style="height: 100%;"
           >
             <!---->
             <span
@@ -796,8 +797,9 @@ exports[`SwipeCell > SwipeCell leftMoreMenuVue demo works fine 1`] = `
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--warning t-button--shape-square"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--primary"
             role="button"
+            style="height: 100%;"
           >
             <!---->
             <span
@@ -810,8 +812,9 @@ exports[`SwipeCell > SwipeCell leftMoreMenuVue demo works fine 1`] = `
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--danger"
             role="button"
+            style="height: 100%;"
           >
             <!---->
             <span
@@ -823,8 +826,6 @@ exports[`SwipeCell > SwipeCell leftMoreMenuVue demo works fine 1`] = `
             </span>
           </button>
           
-          
-          
         </div>
       </div>
     </div>
@@ -868,7 +869,7 @@ exports[`SwipeCell > SwipeCell leftMoreMenuVue demo works fine 1`] = `
             <div
               class="t-cell__title"
             >
-              列表-左滑多操作
+              列表-左滑双操作
               <!--v-if-->
               <!--v-if-->
             </div>
@@ -886,10 +887,13 @@ exports[`SwipeCell > SwipeCell leftMoreMenuVue demo works fine 1`] = `
           style="width: auto;"
         >
           
+          
+          
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-square"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--warning"
             role="button"
+            style="height: 100%;"
           >
             <!---->
             <span
@@ -902,8 +906,9 @@ exports[`SwipeCell > SwipeCell leftMoreMenuVue demo works fine 1`] = `
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--warning t-button--shape-square"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--primary"
             role="button"
+            style="height: 100%;"
           >
             <!---->
             <span
@@ -916,8 +921,9 @@ exports[`SwipeCell > SwipeCell leftMoreMenuVue demo works fine 1`] = `
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--danger"
             role="button"
+            style="height: 100%;"
           >
             <!---->
             <span
@@ -929,8 +935,6 @@ exports[`SwipeCell > SwipeCell leftMoreMenuVue demo works fine 1`] = `
             </span>
           </button>
           
-          
-          
         </div>
       </div>
     </div>
@@ -1718,7 +1722,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             <div
               class="t-cell__title"
             >
-              列表-左滑多操作
+              列表-左滑双操作
               <!--v-if-->
               <!--v-if-->
             </div>
@@ -1736,10 +1740,13 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           style="width: auto;"
         >
           
+          
+          
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-square"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--warning"
             role="button"
+            style="height: 100%;"
           >
             <!---->
             <span
@@ -1752,8 +1759,9 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--warning t-button--shape-square"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--primary"
             role="button"
+            style="height: 100%;"
           >
             <!---->
             <span
@@ -1766,8 +1774,9 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--danger"
             role="button"
+            style="height: 100%;"
           >
             <!---->
             <span
@@ -1779,8 +1788,6 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             </span>
           </button>
           
-          
-          
         </div>
       </div>
     </div>
@@ -1824,7 +1831,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             <div
               class="t-cell__title"
             >
-              列表-左滑多操作
+              列表-左滑双操作
               <!--v-if-->
               <!--v-if-->
             </div>
@@ -1842,10 +1849,13 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           style="width: auto;"
         >
           
+          
+          
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--primary t-button--shape-square"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--warning"
             role="button"
+            style="height: 100%;"
           >
             <!---->
             <span
@@ -1858,8 +1868,9 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--warning t-button--shape-square"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--primary"
             role="button"
+            style="height: 100%;"
           >
             <!---->
             <span
@@ -1872,8 +1883,9 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--danger"
             role="button"
+            style="height: 100%;"
           >
             <!---->
             <span
@@ -1885,8 +1897,6 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
             </span>
           </button>
           
-          
-          
         </div>
       </div>
     </div>
@@ -2552,7 +2562,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--theme t-button--shape-rectangle"
+            class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
             role="button"
           >
             <!---->
@@ -2598,36 +2608,34 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           style="width: auto;"
         >
           
-          <div>
-            <button
-              aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--theme t-button--shape-rectangle"
-              role="button"
+          <button
+            aria-disabled="false"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+            role="button"
+          >
+            <!---->
+            <span
+              class="t-button__text"
             >
-              <!---->
-              <span
-                class="t-button__text"
-              >
-                
-                收藏
-                
-              </span>
-            </button>
-            <button
-              aria-disabled="false"
-              class="t-button t-size-m t-button--base t-button--danger t-button--shape-rectangle"
-              role="button"
+              
+              收藏
+              
+            </span>
+          </button>
+          <button
+            aria-disabled="false"
+            class="t-button t-size-m t-button--base t-button--danger t-button--shape-rectangle"
+            role="button"
+          >
+            <!---->
+            <span
+              class="t-button__text"
             >
-              <!---->
-              <span
-                class="t-button__text"
-              >
-                
-                删除
-                
-              </span>
-            </button>
-          </div>
+              
+              删除
+              
+            </span>
+          </button>
           
           
           
diff --git a/src/tag/__test__/__snapshots__/demo.test.jsx.snap b/src/tag/__test__/__snapshots__/demo.test.jsx.snap
index 5fde17a6..a6336092 100644
--- a/src/tag/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/tag/__test__/__snapshots__/demo.test.jsx.snap
@@ -6,7 +6,7 @@ exports[`Tag > Tag checkableVue demo works fine 1`] = `
 >
   
   <span
-    class="t-tag t-tag--checkable t-tag--shape-square t-tag--size-medium t-is-checked t-tag--checked"
+    class="t-tag t-tag--checkable t-tag--square t-tag--medium t-is-checked t-tag--checked"
     role="button"
   >
     <span
@@ -24,7 +24,7 @@ exports[`Tag > Tag checkableVue demo works fine 1`] = `
     <!--v-if-->
   </span>
   <span
-    class="t-tag t-tag--checkable t-tag--shape-square t-tag--size-medium"
+    class="t-tag t-tag--checkable t-tag--square t-tag--medium"
     role="button"
   >
     <span
@@ -43,7 +43,7 @@ exports[`Tag > Tag checkableVue demo works fine 1`] = `
   </span>
   <span
     aria-disabled="true"
-    class="t-tag t-tag--checkable t-tag--shape-square t-tag--size-medium t-is-disabled t-tag--disabled"
+    class="t-tag t-tag--checkable t-tag--square t-tag--medium t-is-disabled t-tag--disabled"
     role="button"
   >
     <span
@@ -71,7 +71,7 @@ exports[`Tag > Tag closableVue demo works fine 1`] = `
   
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-dark t-tag--size-medium t-is-closable t-tag--closable"
+    class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium t-is-closable t-tag--closable"
     role="button"
   >
     <span
@@ -106,7 +106,7 @@ exports[`Tag > Tag closableVue demo works fine 1`] = `
   </span>
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-dark t-tag--size-medium t-is-closable t-tag--closable"
+    class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium t-is-closable t-tag--closable"
     role="button"
   >
     <span
@@ -158,7 +158,7 @@ exports[`Tag > Tag closableVue demo works fine 1`] = `
 exports[`Tag > Tag ellipsisVue demo works fine 1`] = `
 <span
   aria-disabled="false"
-  class="t-tag t-tag--theme-default t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+  class="t-tag t-tag--default t-tag--square t-tag--dark t-tag--medium"
   role="button"
   style="max-width: 130px;"
 >
@@ -181,7 +181,7 @@ exports[`Tag > Tag ellipsisVue demo works fine 1`] = `
 exports[`Tag > Tag iconVue demo works fine 1`] = `
 <span
   aria-disabled="false"
-  class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+  class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium"
   role="button"
 >
   <span
@@ -246,7 +246,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+        class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium"
         role="button"
       >
         <span
@@ -265,7 +265,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       </span>
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-danger t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+        class="t-tag t-tag--danger t-tag--square t-tag--dark t-tag--medium"
         role="button"
       >
         <span
@@ -284,7 +284,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       </span>
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-warning t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+        class="t-tag t-tag--warning t-tag--square t-tag--dark t-tag--medium"
         role="button"
       >
         <span
@@ -303,7 +303,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       </span>
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-success t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+        class="t-tag t-tag--success t-tag--square t-tag--dark t-tag--medium"
         role="button"
       >
         <span
@@ -322,7 +322,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       </span>
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-default t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+        class="t-tag t-tag--default t-tag--square t-tag--dark t-tag--medium"
         role="button"
       >
         <span
@@ -347,7 +347,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+        class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium"
         role="button"
       >
         <span
@@ -366,7 +366,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       </span>
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-light t-tag--size-medium"
+        class="t-tag t-tag--primary t-tag--square t-tag--light t-tag--medium"
         role="button"
       >
         <span
@@ -385,7 +385,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       </span>
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-outline t-tag--size-medium"
+        class="t-tag t-tag--primary t-tag--square t-tag--outline t-tag--medium"
         role="button"
       >
         <span
@@ -404,7 +404,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       </span>
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-light-outline t-tag--size-medium"
+        class="t-tag t-tag--primary t-tag--square t-tag--light-outline t-tag--medium"
         role="button"
       >
         <span
@@ -440,7 +440,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
     >
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+        class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium"
         role="button"
       >
         <span
@@ -488,7 +488,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-primary t-tag--shape-round t-tag--variant-dark t-tag--size-medium"
+        class="t-tag t-tag--primary t-tag--round t-tag--dark t-tag--medium"
         role="button"
       >
         <span
@@ -507,7 +507,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       </span>
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-primary t-tag--shape-mark t-tag--variant-dark t-tag--size-medium"
+        class="t-tag t-tag--primary t-tag--mark t-tag--dark t-tag--medium"
         role="button"
       >
         <span
@@ -544,7 +544,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-dark t-tag--size-medium t-is-closable t-tag--closable"
+        class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium t-is-closable t-tag--closable"
         role="button"
       >
         <span
@@ -579,7 +579,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       </span>
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-dark t-tag--size-medium t-is-closable t-tag--closable"
+        class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium t-is-closable t-tag--closable"
         role="button"
       >
         <span
@@ -643,7 +643,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
     >
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-default t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+        class="t-tag t-tag--default t-tag--square t-tag--dark t-tag--medium"
         role="button"
         style="max-width: 130px;"
       >
@@ -683,7 +683,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
     >
       
       <span
-        class="t-tag t-tag--checkable t-tag--shape-square t-tag--size-medium t-is-checked t-tag--checked"
+        class="t-tag t-tag--checkable t-tag--square t-tag--medium t-is-checked t-tag--checked"
         role="button"
       >
         <span
@@ -701,7 +701,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
         <!--v-if-->
       </span>
       <span
-        class="t-tag t-tag--checkable t-tag--shape-square t-tag--size-medium"
+        class="t-tag t-tag--checkable t-tag--square t-tag--medium"
         role="button"
       >
         <span
@@ -720,7 +720,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       </span>
       <span
         aria-disabled="true"
-        class="t-tag t-tag--checkable t-tag--shape-square t-tag--size-medium t-is-disabled t-tag--disabled"
+        class="t-tag t-tag--checkable t-tag--square t-tag--medium t-is-disabled t-tag--disabled"
         role="button"
       >
         <span
@@ -761,7 +761,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-dark t-tag--size-large"
+        class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--large"
         role="button"
       >
         <span
@@ -780,7 +780,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       </span>
       <span
         aria-disabled="false"
-        class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+        class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium"
         role="button"
       >
         <span
@@ -804,7 +804,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
     >
       <span
         aria-disabled="false"
-        class="t-tag t-tag--checkable t-tag--shape-square t-tag--size-large"
+        class="t-tag t-tag--checkable t-tag--square t-tag--large"
         role="button"
       >
         <span
@@ -823,7 +823,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
       </span>
       <span
         aria-disabled="false"
-        class="t-tag t-tag--checkable t-tag--shape-square t-tag--size-medium"
+        class="t-tag t-tag--checkable t-tag--square t-tag--medium"
         role="button"
       >
         <span
@@ -853,7 +853,7 @@ exports[`Tag > Tag shapeVue demo works fine 1`] = `
   
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-primary t-tag--shape-round t-tag--variant-dark t-tag--size-medium"
+    class="t-tag t-tag--primary t-tag--round t-tag--dark t-tag--medium"
     role="button"
   >
     <span
@@ -872,7 +872,7 @@ exports[`Tag > Tag shapeVue demo works fine 1`] = `
   </span>
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-primary t-tag--shape-mark t-tag--variant-dark t-tag--size-medium"
+    class="t-tag t-tag--primary t-tag--mark t-tag--dark t-tag--medium"
     role="button"
   >
     <span
@@ -900,7 +900,7 @@ exports[`Tag > Tag sizeVue demo works fine 1`] = `
   
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-dark t-tag--size-large"
+    class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--large"
     role="button"
   >
     <span
@@ -919,7 +919,7 @@ exports[`Tag > Tag sizeVue demo works fine 1`] = `
   </span>
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+    class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium"
     role="button"
   >
     <span
@@ -947,7 +947,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
   
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+    class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium"
     role="button"
   >
     <span
@@ -966,7 +966,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
   </span>
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-danger t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+    class="t-tag t-tag--danger t-tag--square t-tag--dark t-tag--medium"
     role="button"
   >
     <span
@@ -985,7 +985,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
   </span>
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-warning t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+    class="t-tag t-tag--warning t-tag--square t-tag--dark t-tag--medium"
     role="button"
   >
     <span
@@ -1004,7 +1004,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
   </span>
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-success t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+    class="t-tag t-tag--success t-tag--square t-tag--dark t-tag--medium"
     role="button"
   >
     <span
@@ -1023,7 +1023,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
   </span>
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-default t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+    class="t-tag t-tag--default t-tag--square t-tag--dark t-tag--medium"
     role="button"
   >
     <span
@@ -1051,7 +1051,7 @@ exports[`Tag > Tag variantVue demo works fine 1`] = `
   
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-dark t-tag--size-medium"
+    class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium"
     role="button"
   >
     <span
@@ -1070,7 +1070,7 @@ exports[`Tag > Tag variantVue demo works fine 1`] = `
   </span>
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-light t-tag--size-medium"
+    class="t-tag t-tag--primary t-tag--square t-tag--light t-tag--medium"
     role="button"
   >
     <span
@@ -1089,7 +1089,7 @@ exports[`Tag > Tag variantVue demo works fine 1`] = `
   </span>
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-outline t-tag--size-medium"
+    class="t-tag t-tag--primary t-tag--square t-tag--outline t-tag--medium"
     role="button"
   >
     <span
@@ -1108,7 +1108,7 @@ exports[`Tag > Tag variantVue demo works fine 1`] = `
   </span>
   <span
     aria-disabled="false"
-    class="t-tag t-tag--theme-primary t-tag--shape-square t-tag--variant-light-outline t-tag--size-medium"
+    class="t-tag t-tag--primary t-tag--square t-tag--light-outline t-tag--medium"
     role="button"
   >
     <span
diff --git a/src/tag/__test__/index.test.jsx b/src/tag/__test__/index.test.jsx
index 1b7a96a4..f17f2438 100644
--- a/src/tag/__test__/index.test.jsx
+++ b/src/tag/__test__/index.test.jsx
@@ -23,28 +23,28 @@ describe('Tag.vue', async () => {
   it('theme render', async () => {
     themeList.forEach((t) => {
       const wrapper = mount(() => <Tag theme={t}>{TEXT}</Tag>);
-      expect(wrapper.classes()).toContain(`t-tag--theme-${t}`);
+      expect(wrapper.classes()).toContain(`t-tag--${t}`);
     });
   });
 
   it('variant render', async () => {
     variantList.forEach((v) => {
       const wrapper = mount(() => <Tag variant={v}>{TEXT}</Tag>);
-      expect(wrapper.classes()).toContain(`t-tag--variant-${v}`);
+      expect(wrapper.classes()).toContain(`t-tag--${v}`);
     });
   });
 
   it('size render', async () => {
     sizeList.forEach((s) => {
       const wrapper = mount(() => <Tag size={s}>{TEXT}</Tag>);
-      expect(wrapper.classes()).toContain(`t-tag--size-${s}`);
+      expect(wrapper.classes()).toContain(`t-tag--${s}`);
     });
   });
 
   it('shape render', async () => {
     shapeList.forEach((s) => {
       const wrapper = mount(() => <Tag shape={s}>{TEXT}</Tag>);
-      expect(wrapper.classes()).toContain(`t-tag--shape-${s}`);
+      expect(wrapper.classes()).toContain(`t-tag--${s}`);
     });
   });
 
@@ -106,14 +106,14 @@ describe('CheckTag render', async () => {
   it('size render', async () => {
     sizeList.forEach((s) => {
       const wrapper = mount(() => <TCheckTag size={s}>{TEXT}</TCheckTag>);
-      expect(wrapper.classes()).toContain(`t-tag--size-${s}`);
+      expect(wrapper.classes()).toContain(`t-tag--${s}`);
     });
   });
 
   it('shape render', async () => {
     shapeList.forEach((s) => {
       const wrapper = mount(() => <TCheckTag shape={s}>{TEXT}</TCheckTag>);
-      expect(wrapper.classes()).toContain(`t-tag--shape-${s}`);
+      expect(wrapper.classes()).toContain(`t-tag--${s}`);
     });
   });
 
diff --git a/src/toast/__test__/__snapshots__/demo.test.jsx.snap b/src/toast/__test__/__snapshots__/demo.test.jsx.snap
index 9aad3426..97c2a25e 100644
--- a/src/toast/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/toast/__test__/__snapshots__/demo.test.jsx.snap
@@ -77,71 +77,6 @@ exports[`Toast > Toast iconTextVue demo works fine 1`] = `
 </div>
 `;
 
-exports[`Toast > Toast iconVue demo works fine 1`] = `
-<div
-  class="toast-demo"
->
-  <button
-    aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
-    role="button"
-  >
-    <!---->
-    <span
-      class="t-button__text"
-    >
-      
-      成功
-      
-    </span>
-  </button>
-  <button
-    aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
-    role="button"
-  >
-    <!---->
-    <span
-      class="t-button__text"
-    >
-      
-      警告
-      
-    </span>
-  </button>
-  <button
-    aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
-    role="button"
-    style="margin-top: 8px;"
-  >
-    <!---->
-    <span
-      class="t-button__text"
-    >
-      
-      加载
-      
-    </span>
-  </button>
-  <button
-    aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
-    role="button"
-    style="margin-top: 8px;"
-  >
-    <!---->
-    <span
-      class="t-button__text"
-    >
-      
-      自定义图标
-      
-    </span>
-  </button>
-</div>
-`;
-
 exports[`Toast > Toast maskVue demo works fine 1`] = `
 <div
   class="toast-demo"
diff --git a/src/toast/__test__/demo.test.jsx b/src/toast/__test__/demo.test.jsx
index cd0c1bdc..e0125bda 100644
--- a/src/toast/__test__/demo.test.jsx
+++ b/src/toast/__test__/demo.test.jsx
@@ -3,7 +3,6 @@
  */
 
 import { mount } from '@vue/test-utils';
-import iconVue from '@/toast/demos/icon.vue';
 import iconTextVue from '@/toast/demos/iconText.vue';
 import maskVue from '@/toast/demos/mask.vue';
 import mobileVue from '@/toast/demos/mobile.vue';
@@ -13,7 +12,6 @@ import preventScrollThroughVue from '@/toast/demos/preventScrollThrough.vue';
 import textVue from '@/toast/demos/text.vue';
 
 const mapper = {
-  iconVue,
   iconTextVue,
   maskVue,
   mobileVue,