Repository: Tencent/tdesign-mobile-vue
Pull request #1301 (2024-04-12 09:08:23)

feat(Skeleton): sfc changed to tsx
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- fix(Skeleton): 修复 `delay` 属性无效的问题
- feat(Skeleton): `sfc` 改 `tsx`

- [ ] 本条 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/8659765157)
<!-- AUTO_PREVIEW_HOOK -->
github-actions[bot]: **Size Change:** +50 B (0%) 

**Total Size:** 438 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 234 kB | +134 B (0%) |
| `./dist/tdesign.min.js` | 138 kB | -84 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 38.4 kB |
| `./dist/tdesign.min.css` | 28 kB |

</details>


github-actions[bot]: **Size Change:** +50 B (0%) 

**Total Size:** 438 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 234 kB | +134 B (0%) |
| `./dist/tdesign.min.js` | 138 kB | -84 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 38.4 kB |
| `./dist/tdesign.min.css` | 28 kB |

</details>



Patch:
diff --git a/.github/workflows/pr-spelling.template.yml b/.github/workflows/pr-spelling.template.yml
index 3e3732ff..d6237cdd 100644
--- a/.github/workflows/pr-spelling.template.yml
+++ b/.github/workflows/pr-spelling.template.yml
@@ -6,7 +6,7 @@ jobs:
     name: Spell Check with Typos
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Check spelling
         uses: crate-ci/typos@master
         with:
diff --git a/.github/workflows/typos-config.toml b/.github/workflows/typos-config.toml
index 25243a87..723bfea6 100644
--- a/.github/workflows/typos-config.toml
+++ b/.github/workflows/typos-config.toml
@@ -1,13 +1,8 @@
+default.check-filename = true
+
 [default.extend-words]
 actived = "actived"
-formated = "formated"
-formate = "formate"
-Colum = "Colum"
-ans = "ans"
-ba = "ba"
-ded = "ded"
-Hel = "Hel"
-Successivo = "Successivo"
+colum = "colum"
 
 [files]
 extend-exclude = ["CHANGELOG.md", "*.snap"]
diff --git a/package.json b/package.json
index 3ee54a0c..c553c15a 100644
--- a/package.json
+++ b/package.json
@@ -84,8 +84,6 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.16.5",
-    "@types/lodash": "^4.14.178",
-    "@types/validator": "^13.6.3",
     "@use-gesture/vanilla": "^10.3.0",
     "@vueuse/core": "10.7.0",
     "dayjs": "^1.10.7",
@@ -102,7 +100,6 @@
     "@babel/plugin-transform-runtime": "^7.16.4",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-typescript": "^7.16.0",
-    "@babel/runtime": "^7.16.5",
     "@babel/helper-module-imports": "7.22.5",
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
@@ -116,8 +113,10 @@
     "@rollup/plugin-url": "^6.0.0",
     "@soerenmartius/vue3-clipboard": "^0.1.1",
     "@types/jest": "^28.1.6",
+    "@types/lodash": "^4.14.178",
     "@types/node": "18.8.0",
     "@types/prismjs": "^1.16.2",
+    "@types/validator": "^13.6.3",
     "@typescript-eslint/eslint-plugin": "^5.5.0",
     "@typescript-eslint/parser": "~5.34.0",
     "@vitejs/plugin-vue": "^2.3.1",
diff --git a/src/_common b/src/_common
index becfba8b..c261efa9 160000
--- a/src/_common
+++ b/src/_common
@@ -1,1 +1,1 @@
-Subproject commit becfba8b1e450af231fe6ed80b16fcae2d56f27a
+Subproject commit c261efa959465cb49f85843761e659281b6a2b88
diff --git a/src/button/button.en-US.md b/src/button/button.en-US.md
index 00adaf2d..5f5998ec 100644
--- a/src/button/button.en-US.md
+++ b/src/button/button.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Button Props
 
 name | type | default | description | required
@@ -12,12 +13,12 @@ ghost | Boolean | false | make background-color to be transparent | N
 icon | Slot / Function | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 loading | Boolean | false | set button to be loading state | N
 loadingProps | Object | - | Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/button/type.ts) | N
-shape | String | rectangle | button shape。options：rectangle/square/round/circle | N
-size | String | medium | a button has three size。options：extra-small/small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+shape | String | rectangle | button shape。options: rectangle/square/round/circle | N
+size | String | medium | a button has four size。options: extra-small/small/medium/large | N
 suffix | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-theme | String | default | button theme。options：default/primary/danger/light | N
-type | String | button | type of button element in html。options：submit/reset/button | N
-variant | String | base | button variant。options：base/outline/text | N
+theme | String | default | button theme。options: default/primary/danger/light | N
+type | String | button | type of button element in html。options: submit/reset/button | N
+variant | String | base | button variant。options: base/outline/text | N
 onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on click | N
 
 ### Button Events
@@ -26,8 +27,8 @@ name | params | description
 -- | -- | --
 click | `(e: MouseEvent)` | trigger on click
 
+### CSS 变量
 
-### CSS Variables
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -129,4 +130,4 @@ Name | Default Value | Description
 --td-button-small-font-size | @font-size-base | - 
 --td-button-small-height | 32px | - 
 --td-button-small-icon-font-size | 18px | - 
---td-button-small-padding-horizontal | 12px | - 
+--td-button-small-padding-horizontal | 12px | -
\ No newline at end of file
diff --git a/src/button/button.md b/src/button/button.md
index 28081cd9..b2cc02ab 100644
--- a/src/button/button.md
+++ b/src/button/button.md
@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Button Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 block | Boolean | false | 是否为块级元素 | N
 content | String / Slot / Function | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
@@ -13,7 +14,7 @@ icon | Slot / Function | - | 按钮内部图标，可完全自定义。TS 类型
 loading | Boolean | false | 是否显示为加载状态 | N
 loadingProps | Object | - | 透传加载组件全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/button/type.ts) | N
 shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
-size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large | N
 suffix | Slot / Function | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N
 type | String | button | 按钮类型。可选项：submit/reset/button | N
@@ -26,8 +27,8 @@ onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触
 -- | -- | --
 click | `(e: MouseEvent)` | 点击时触发
 
-
 ### CSS 变量
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -129,4 +130,4 @@ click | `(e: MouseEvent)` | 点击时触发
 --td-button-small-font-size | @font-size-base | - 
 --td-button-small-height | 32px | - 
 --td-button-small-icon-font-size | 18px | - 
---td-button-small-padding-horizontal | 12px | - 
+--td-button-small-padding-horizontal | 12px | -
\ No newline at end of file
diff --git a/src/button/button.tsx b/src/button/button.tsx
new file mode 100644
index 00000000..b101331f
--- /dev/null
+++ b/src/button/button.tsx
@@ -0,0 +1,80 @@
+import { computed, toRefs, defineComponent, getCurrentInstance } from 'vue';
+
+import { space } from 'postcss/lib/list';
+import TLoading from '../loading';
+import { Hover } from '../shared';
+import ButtonProps from './props';
+import config from '../config';
+import { useFormDisabled } from '../form/hooks';
+import { TdButtonProps } from './type';
+import { usePrefixClass } from '../hooks/useClass';
+import { useContent, useTNodeJSX } from '../hooks/tnode';
+
+const { prefix } = config;
+const name = `${prefix}-button`;
+
+export default defineComponent({
+  name,
+  directives: { Hover },
+  props: ButtonProps,
+  setup(props) {
+    const buttonClass = usePrefixClass('button');
+    const renderTNodeJSX = useTNodeJSX();
+    const renderTNodeContent = useContent();
+    const isDisabled = useFormDisabled();
+
+    const buttonClasses = computed(() => [
+      `${buttonClass.value}`,
+      `${buttonClass.value}--size-${props.size}`,
+      `${buttonClass.value}--${props.variant}`,
+      {
+        [`${buttonClass.value}--${props.theme}`]: props.theme,
+        [`${buttonClass.value}--${props.shape}`]: props.shape,
+        [`${buttonClass.value}--ghost`]: props.ghost,
+        [`${buttonClass.value}--block`]: props.block,
+        [`${buttonClass.value}--disabled`]: isDisabled.value,
+        [`${buttonClass.value}--loading`]: props.loading,
+      },
+    ]);
+
+    const handleClick = (e: MouseEvent) => {
+      if (!props.loading && !isDisabled.value) {
+        props.onClick?.(e);
+      } else {
+        e.stopPropagation();
+      }
+    };
+
+    return () => {
+      const suffix = renderTNodeJSX('suffix');
+
+      const readerIcon = () => {
+        if (props.loading) {
+          return <TLoading inherit-color {...(props.loadingProps as TdButtonProps['loadingProps'])} />;
+        }
+
+        return renderTNodeJSX('icon');
+      };
+
+      const readerContent = () => {
+        const content = renderTNodeContent('default', 'content');
+        return <span class={`${buttonClass.value}__content`}>{content}</span>;
+      };
+      return (
+        <button
+          class={buttonClasses.value}
+          role="button"
+          type={props.type}
+          disabled={props.disabled}
+          aria-disabled={props.disabled}
+          onClick={handleClick}
+          v-hover={{ className: `${buttonClass.value}--hover` }}
+        >
+          {readerIcon()}
+          {readerContent()}
+          {suffix}
+        </button>
+      );
+    };
+  },
+});
diff --git a/src/button/button.vue b/src/button/button.vue
deleted file mode 100644
index 8e2a7178..00000000
--- a/src/button/button.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <button
-    v-hover="{ className: `${name}--hover` }"
-    :class="buttonClass"
-    :disabled="disabled"
-    :type="type"
-    role="button"
-    :aria-disabled="disabled"
-    @click="onClick"
-  >
-    <t-loading v-if="loading" inherit-color v-bind="loadingProps" />
-    <t-node v-else :content="iconContent" />
-    <span :class="`${name}__content`">
-      <t-node :content="buttonContent" />
-    </span>
-    <t-node :content="suffixContent" />
-  </button>
-</template>
-
-<script lang="ts">
-import { computed, toRefs, defineComponent, getCurrentInstance } from 'vue';
-
-import Loading from '../loading';
-import { renderContent, renderTNode, TNode, Hover } from '../shared';
-import ButtonProps from './props';
-import config from '../config';
-import { useFormDisabled } from '../form/hooks';
-
-const { prefix } = config;
-const name = `${prefix}-button`;
-
-export default defineComponent({
-  name,
-  components: { TNode, TLoading: Loading },
-  directives: { Hover },
-  props: ButtonProps,
-  emits: ['click'],
-  setup(props) {
-    const disabled = useFormDisabled();
-    const internalInstance = getCurrentInstance();
-    const buttonClass = computed(() => [
-      `${name}`,
-      `${name}--size-${props.size}`,
-      `${name}--${props.variant}`,
-      {
-        [`${name}--${props.theme}`]: props.theme,
-        [`${name}--${props.shape}`]: props.shape,
-        [`${name}--ghost`]: props.ghost,
-        [`${name}--block`]: props.block,
-        [`${name}--disabled`]: disabled.value,
-        [`${name}--loading`]: props.loading,
-      },
-    ]);
-    const buttonContent = computed(() => renderContent(internalInstance, 'default', 'content'));
-    const iconContent = computed(() => renderTNode(internalInstance, 'icon'));
-    const suffixContent = computed(() => renderTNode(internalInstance, 'suffix'));
-
-    const onClick = (e: Event) => {
-      if (!props.loading && !disabled.value) {
-        props.onClick?.(e);
-      } else {
-        e.stopPropagation();
-      }
-    };
-    return {
-      name,
-      ...toRefs(props),
-      disabled,
-      buttonContent,
-      iconContent,
-      suffixContent,
-      buttonClass,
-      onClick,
-    };
-  },
-});
-</script>
diff --git a/src/button/index.ts b/src/button/index.ts
index 296f52d2..ca13bbbc 100644
--- a/src/button/index.ts
+++ b/src/button/index.ts
@@ -1,4 +1,4 @@
-import Button from './button.vue';
+import Button from './button';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';
diff --git a/src/button/type.ts b/src/button/type.ts
index 6e9edfae..2c5e7339 100644
--- a/src/button/type.ts
+++ b/src/button/type.ts
@@ -5,7 +5,7 @@
  * */
 
 import { LoadingProps } from '../loading';
-import { TNode, SizeEnum } from '../common';
+import { TNode } from '../common';
 
 export interface TdButtonProps {
   /**
@@ -49,7 +49,7 @@ export interface TdButtonProps {
    * 组件尺寸
    * @default medium
    */
-  size?: SizeEnum;
+  size?: 'extra-small' | 'small' | 'medium' | 'large';
   /**
    * 右侧内容，可用于定义右侧图标
    */
diff --git a/src/divider/divider.en-US.md b/src/divider/divider.en-US.md
index d5b366c9..6c8512aa 100644
--- a/src/divider/divider.en-US.md
+++ b/src/divider/divider.en-US.md
@@ -6,14 +6,14 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-align | String | center | options：left/right/center | N
+align | String | center | options: left/right/center | N
 content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 dashed | Boolean | false | \- | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-layout | String | horizontal | options：horizontal/vertical | N
+layout | String | horizontal | options: horizontal/vertical | N
 
+### CSS 变量
 
-### CSS Variables
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -21,4 +21,4 @@ Name | Default Value | Description
 --td-divider-content-color | @font-gray-3 | - 
 --td-divider-content-font-size | 12px | - 
 --td-divider-content-line-height | 20px | - 
---td-divider-content-line-style | solid | - 
+--td-divider-content-line-style | solid | -
\ No newline at end of file
diff --git a/src/divider/divider.md b/src/divider/divider.md
index 3ee073a0..08a16e79 100644
--- a/src/divider/divider.md
+++ b/src/divider/divider.md
@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Divider Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 align | String | center | 文本位置（仅在水平分割线有效）。可选项：left/right/center | N
 content | String / Slot / Function | - | 子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
@@ -11,8 +12,8 @@ dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
 default | String / Slot / Function | - | 子元素，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
 
-
 ### CSS 变量
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -20,4 +21,4 @@ layout | String | horizontal | 分隔线类型有两种：水平和垂直。可
 --td-divider-content-color | @font-gray-3 | - 
 --td-divider-content-font-size | 12px | - 
 --td-divider-content-line-height | 20px | - 
---td-divider-content-line-style | solid | - 
+--td-divider-content-line-style | solid | -
\ No newline at end of file
diff --git a/src/divider/divider.tsx b/src/divider/divider.tsx
new file mode 100644
index 00000000..9d11c2b0
--- /dev/null
+++ b/src/divider/divider.tsx
@@ -0,0 +1,33 @@
+import { defineComponent, computed } from 'vue';
+import config from '../config';
+import DividerProps from './props';
+import { useContent } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
+
+const { prefix } = config;
+const name = `${prefix}-divider`;
+export default defineComponent({
+  name,
+  props: DividerProps,
+  setup(props) {
+    const renderTNodeContent = useContent();
+
+    const dividerClass = usePrefixClass('divider');
+    const dividerClasses = computed(() => [
+      `${dividerClass.value}`,
+      `${dividerClass.value}--${props.layout}`,
+      `${dividerClass.value}--${props.align}`,
+      {
+        [`${dividerClass.value}--dashed`]: props.dashed,
+      },
+    ]);
+    return () => {
+      const content = renderTNodeContent('default', 'content');
+      return (
+        <div class={dividerClasses.value} role="separator">
+          <div class={`${dividerClass.value}__content`}>{content}</div>
+        </div>
+      );
+    };
+  },
+});
diff --git a/src/divider/divider.vue b/src/divider/divider.vue
deleted file mode 100644
index 0124517b..00000000
--- a/src/divider/divider.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div :class="rootClass" role="separator">
-    <div :class="`${name}__content`">
-      <t-node :content="dividerContent" />
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { computed, defineProps, getCurrentInstance } from 'vue';
-import { renderContent, TNode } from '../shared';
-import DividerProps from './props';
-import config from '../config';
-
-const { prefix } = config;
-const name = `${prefix}-divider`;
-
-export default {
-  name,
-};
-</script>
-
-<script lang="ts" setup>
-const props = defineProps(DividerProps);
-const internalInstance = getCurrentInstance();
-const dividerContent = computed(() => renderContent(internalInstance, 'default', 'content'));
-const rootClass = computed(() => [
-  `${name}`,
-  `${name}--${props.layout}`,
-  `${name}--${props.align}`,
-  {
-    [`${name}--dashed`]: props.dashed,
-  },
-]);
-</script>
diff --git a/src/divider/index.ts b/src/divider/index.ts
index a8276cc9..663956c9 100644
--- a/src/divider/index.ts
+++ b/src/divider/index.ts
@@ -1,4 +1,4 @@
-import _Divider from './divider.vue';
+import _Divider from './divider';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';
diff --git a/src/fab/fab.en-US.md b/src/fab/fab.en-US.md
index 1c65d96d..51f1a484 100644
--- a/src/fab/fab.en-US.md
+++ b/src/fab/fab.en-US.md
@@ -6,7 +6,7 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-buttonProps | Object | - | \- | N
+buttonProps | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/fab/type.ts) | N
 icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 style | String | right: 16px; bottom: 32px; | \- | N
 text | String | - | \- | N
@@ -18,9 +18,9 @@ name | params | description
 -- | -- | --
 click | `(context: {e: MouseEvent})` | \-
 
+### CSS 变量
 
-### CSS Variables
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-fab-shadow | @shadow-2 | - 
+--td-fab-shadow | @shadow-2 | -
\ No newline at end of file
diff --git a/src/fab/fab.md b/src/fab/fab.md
index 1f7b0dfe..f0d6bd07 100644
--- a/src/fab/fab.md
+++ b/src/fab/fab.md
@@ -1,11 +1,12 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Fab Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-buttonProps | Object | - | 透传至 Button 组件 | N
+buttonProps | Object | - | 透传至 Button 组件。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/fab/type.ts) | N
 icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 style | String | right: 16px; bottom: 32px; | 悬浮按钮的样式，常用于调整位置 | N
 text | String | - | 文本内容 | N
@@ -17,9 +18,9 @@ onClick | Function |  | TS 类型：`(context: {e: MouseEvent}) => void`<br/>悬
 -- | -- | --
 click | `(context: {e: MouseEvent})` | 悬浮按钮点击事件
 
-
 ### CSS 变量
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-fab-shadow | @shadow-2 | - 
+--td-fab-shadow | @shadow-2 | -
\ No newline at end of file
diff --git a/src/fab/fab.tsx b/src/fab/fab.tsx
new file mode 100644
index 00000000..c79adc13
--- /dev/null
+++ b/src/fab/fab.tsx
@@ -0,0 +1,41 @@
+import { defineComponent } from 'vue';
+import config from '../config';
+import FabProps from './props';
+import { useTNodeJSX } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
+import TButton from '../button';
+import { TdFabProps } from './type';
+
+const { prefix } = config;
+const name = `${prefix}-fab`;
+export default defineComponent({
+  name,
+  props: FabProps,
+  setup(props) {
+    const renderTNodeJSX = useTNodeJSX();
+
+    const fabClass = usePrefixClass('fab');
+
+    const handleClick = (e: MouseEvent) => {
+      props.onClick?.({ e });
+    };
+
+    return () => {
+      const icon = renderTNodeJSX('icon');
+      return (
+        <div class={fabClass.value} style={props.style} onClick={handleClick}>
+          <TButton
+            size="large"
+            theme="primary"
+            shape={props.text ? 'round' : 'circle'}
+            class={`${fabClass.value}__button`}
+            {...(props.buttonProps as TdFabProps['buttonProps'])}
+            icon={icon}
+          >
+            {props.text}
+          </TButton>
+        </div>
+      );
+    };
+  },
+});
diff --git a/src/fab/fab.vue b/src/fab/fab.vue
deleted file mode 100644
index 66df0f34..00000000
--- a/src/fab/fab.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div :class="classes" :style="style" @click="onClick">
-    <t-button
-      size="large"
-      theme="primary"
-      :shape="props.text ? 'round' : 'circle'"
-      :class="[`${name}__button`]"
-      v-bind="buttonProps"
-      :icon="() => iconTNode"
-    >
-      {{ text }}
-    </t-button>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineProps, defineEmits, getCurrentInstance } from 'vue';
-
-import { renderTNode } from '../shared';
-import fabProps from './props';
-import config from '../config';
-import TButton from '../button';
-
-const { prefix } = config;
-const name = `${prefix}-fab`;
-
-export default {
-  name,
-};
-</script>
-
-<script lang="ts" setup>
-const props = defineProps(fabProps);
-const emit = defineEmits(['click']);
-
-const internalInstance = getCurrentInstance();
-const iconTNode = computed(() => renderTNode(internalInstance, 'icon'));
-
-const classes = computed(() => ({
-  [`${name}`]: true,
-}));
-
-const onClick = (e: MouseEvent) => props.onClick?.({ e });
-</script>
diff --git a/src/fab/index.ts b/src/fab/index.ts
index 36a94c1c..a7ab429d 100644
--- a/src/fab/index.ts
+++ b/src/fab/index.ts
@@ -1,4 +1,4 @@
-import Fab from './fab.vue';
+import Fab from './fab';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';
diff --git a/src/fab/type.ts b/src/fab/type.ts
index 17971c53..9fc5565d 100644
--- a/src/fab/type.ts
+++ b/src/fab/type.ts
@@ -3,6 +3,7 @@
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
+
 import { ButtonProps } from '../button';
 import { TNode } from '../common';
 
diff --git a/src/link/index.ts b/src/link/index.ts
index d199659d..dcba5276 100644
--- a/src/link/index.ts
+++ b/src/link/index.ts
@@ -1,4 +1,4 @@
-import Link from './link.vue';
+import Link from './link';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';
diff --git a/src/link/link.en-US.md b/src/link/link.en-US.md
index 2894a9ff..c35c9c98 100644
--- a/src/link/link.en-US.md
+++ b/src/link/link.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Link Props
 
 name | type | default | description | required
@@ -11,10 +12,10 @@ disabled | Boolean | - | make link to be disabled | N
 hover | Boolean | - | \- | N
 href | String | - | \- | N
 prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 target | String | - | target is an attribute of `<a>` | N
-theme | String | default | options：default/primary/danger/warning/success | N
+theme | String | default | options: default/primary/danger/warning/success | N
 underline | Boolean | - | \- | N
 onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>click event, it won't trigger when it's disabled | N
 
@@ -24,8 +25,8 @@ name | params | description
 -- | -- | --
 click | `(e: MouseEvent)` | click event, it won't trigger when it's disabled
 
+### CSS 变量
 
-### CSS Variables
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -43,4 +44,4 @@ Name | Default Value | Description
 --td-link-success-disabled-color | @success-color-disabled | - 
 --td-link-warning-active-color | @warning-color-active | - 
 --td-link-warning-color | @warning-color | - 
---td-link-warning-disabled-color | @warning-color-disabled | - 
+--td-link-warning-disabled-color | @warning-color-disabled | -
\ No newline at end of file
diff --git a/src/link/link.md b/src/link/link.md
index 5681f222..c6c726f1 100644
--- a/src/link/link.md
+++ b/src/link/link.md
@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Link Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 content | String / Slot / Function | - | 链接内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 链接内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
@@ -24,8 +25,8 @@ onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击事件
 -- | -- | --
 click | `(e: MouseEvent)` | 点击事件，禁用状态不会触发点击事件
 
-
 ### CSS 变量
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -43,4 +44,4 @@ click | `(e: MouseEvent)` | 点击事件，禁用状态不会触发点击事件
 --td-link-success-disabled-color | @success-color-disabled | - 
 --td-link-warning-active-color | @warning-color-active | - 
 --td-link-warning-color | @warning-color | - 
---td-link-warning-disabled-color | @warning-color-disabled | - 
+--td-link-warning-disabled-color | @warning-color-disabled | -
\ No newline at end of file
diff --git a/src/link/link.tsx b/src/link/link.tsx
new file mode 100644
index 00000000..749a2076
--- /dev/null
+++ b/src/link/link.tsx
@@ -0,0 +1,64 @@
+import { defineComponent, computed } from 'vue';
+import config from '../config';
+import LinkProps from './props';
+import { useContent, useTNodeJSX } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
+
+const { prefix } = config;
+const name = `${prefix}-link`;
+export default defineComponent({
+  name,
+  props: LinkProps,
+  setup(props) {
+    const linkClass = usePrefixClass('link');
+    const renderTNodeJSX = useTNodeJSX();
+    const renderTNodeContent = useContent();
+
+    const linkClasses = computed(() => [
+      linkClass.value,
+      `${linkClass.value}--${props.theme || 'default'}`,
+      `${linkClass.value}--${props.size || 'medium'}`,
+      {
+        [`${linkClass.value}--disabled`]: props.disabled,
+        [`${linkClass.value}--underline`]: props.underline,
+        [`${linkClass.value}--hover`]: props.hover && !props.disabled,
+      },
+    ]);
+
+    const handleClick = (e: MouseEvent) => {
+      if (props.disabled) return;
+      props.onClick?.(e);
+    };
+
+    const renderContent = () => {
+      const content = renderTNodeContent('default', 'content');
+      return content ? <span class={[`${linkClass.value}__content`]}>{content}</span> : null;
+    };
+
+    const renderPrefixIcon = () => {
+      const prefixIcon = renderTNodeJSX('prefixIcon');
+      return prefixIcon ? <span class={[`${linkClass.value}__prefix-icon`]}>{prefixIcon}</span> : null;
+    };
+
+    const renderSuffixIcon = () => {
+      const suffixIcon = renderTNodeJSX('suffixIcon');
+      return suffixIcon ? <span class={[`${linkClass.value}__suffix-icon`]}>{suffixIcon}</span> : null;
+    };
+
+    return () => {
+      return (
+        <a
+          class={linkClasses.value}
+          aria-disabled={props.disabled}
+          target={props.target}
+          href={props.disabled || !props.href ? undefined : props.href}
+          onClick={handleClick}
+        >
+          {renderPrefixIcon()}
+          {renderContent()}
+          {renderSuffixIcon()}
+        </a>
+      );
+    };
+  },
+});
diff --git a/src/link/link.vue b/src/link/link.vue
deleted file mode 100644
index e4f26fc9..00000000
--- a/src/link/link.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <a
-    :href="disabled || !href ? undefined : href"
-    :target="target"
-    :class="linkClass"
-    :aria-disabled="disabled"
-    @click="handleClick"
-  >
-    <span v-if="prefixContent" :class="`${name}__prefix-icon ${prefix}-class-prefix-icon`">
-      <t-node :content="prefixContent"></t-node>
-    </span>
-    <span :class="`${name}__content`">
-      <t-node :content="linkContent"></t-node>
-    </span>
-    <span v-if="suffixContent" :class="`${name}__suffix-icon ${prefix}-class-suffix-icon`">
-      <t-node :content="suffixContent"></t-node>
-    </span>
-  </a>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, getCurrentInstance } from 'vue';
-import config from '../config';
-import LinkProps from './props';
-import { renderContent, renderTNode, TNode } from '../shared';
-
-const { prefix } = config;
-const name = `${prefix}-link`;
-
-export default defineComponent({
-  name,
-  components: {
-    TNode,
-  },
-  props: LinkProps,
-  setup(props) {
-    const _this = getCurrentInstance();
-    const linkContent = computed(() => renderContent(_this, 'default', 'content'));
-    const prefixContent = computed(() => renderTNode(_this, 'prefixIcon'));
-    const suffixContent = computed(() => renderTNode(_this, 'suffixIcon'));
-
-    const handleClick = (e: MouseEvent) => {
-      if (props.disabled) return;
-      props.onClick?.(e);
-    };
-
-    const linkClass = computed(() => [
-      name,
-      `${name}--${props.theme || 'default'}`,
-      `${name}--${props.size || 'medium'}`,
-      {
-        [`${name}--disabled`]: props.disabled,
-        [`${name}--underline`]: props.underline,
-        [`${name}--hover`]: props.hover && !props.disabled,
-      },
-    ]);
-
-    return {
-      prefix,
-      linkClass,
-      name,
-      handleClick,
-      linkContent,
-      prefixContent,
-      suffixContent,
-    };
-  },
-});
-</script>
diff --git a/src/result/result.tsx b/src/result/result.tsx
index b7af526f..fd3624ee 100644
--- a/src/result/result.tsx
+++ b/src/result/result.tsx
@@ -1,21 +1,25 @@
 import { computed, defineComponent } from 'vue';
 import { InfoCircleIcon, CheckCircleIcon, CloseCircleIcon } from 'tdesign-icons-vue-next';
 import config from '../config';
-import TResultProps from './props';
+import ResultProps from './props';
 import { useTNodeJSX } from '../hooks/tnode';
 import TImage from '../image';
 import { useIcon } from '../hooks/icon';
+import { usePrefixClass } from '../hooks/useClass';
 
 const { prefix } = config;
 const name = `${prefix}-result`;
 export default defineComponent({
   name,
-  props: TResultProps,
+  props: ResultProps,
   setup(props) {
-    const classPrefix = name;
+    const resultClass = usePrefixClass('result');
     const renderTNodeJSX = useTNodeJSX();
     const renderIconTNode = useIcon();
-    const resultClass = computed(() => [`${classPrefix}`, `${classPrefix}--theme-${props.theme || 'default'}`]);
+    const resultClasses = computed(() => [
+      `${resultClass.value}`,
+      `${resultClass.value}--theme-${props.theme || 'default'}`,
+    ]);
 
     const renderIcon = () => {
       const defaultIcons = {
@@ -25,7 +29,7 @@ export default defineComponent({
         error: CloseCircleIcon,
       };
       const iconContent = renderIconTNode('icon', defaultIcons);
-      return iconContent ? <iconContent class={`${classPrefix}__icon`}></iconContent> : null;
+      return iconContent ? <iconContent class={`${resultClass.value}__icon`}></iconContent> : null;
     };
 
     const renderImage = () => {
@@ -41,20 +45,22 @@ export default defineComponent({
 
     const renderThumb = () => {
       const image = renderImage();
-      return <div class={`${classPrefix}__thumb`}>{image || renderIcon()}</div>;
+      return <div class={`${resultClass.value}__thumb`}>{image || renderIcon()}</div>;
     };
 
     const renderTitle = () => {
       const title = renderTNodeJSX('title');
-      return title ? <div class={[`${classPrefix}__title`]}>{title}</div> : null;
+      return title ? <div class={[`${resultClass.value}__title`]}>{title}</div> : null;
     };
+
     const renderDescription = () => {
       const description = renderTNodeJSX('description');
-      return description ? <div class={[`${classPrefix}__description`]}>{description}</div> : null;
+      return description ? <div class={[`${resultClass.value}__description`]}>{description}</div> : null;
     };
+
     return () => {
       return (
-        <div class={[resultClass.value]}>
+        <div class={[resultClasses.value]}>
           {renderThumb()}
           {renderTitle()}
           {renderDescription()}
diff --git a/src/skeleton/index.ts b/src/skeleton/index.ts
index dbf0690c..0a50d9af 100644
--- a/src/skeleton/index.ts
+++ b/src/skeleton/index.ts
@@ -1,4 +1,4 @@
-import Skeleton from './skeleton.vue';
+import Skeleton from './skeleton';
 import { withInstall, WithInstallType } from '../shared';
 
 import { TdSkeletonProps } from './type';
diff --git a/src/skeleton/skeleton.en-US.md b/src/skeleton/skeleton.en-US.md
index c2aeb4ad..050f8957 100644
--- a/src/skeleton/skeleton.en-US.md
+++ b/src/skeleton/skeleton.en-US.md
@@ -9,7 +9,7 @@ name | type | default | description | required
 animation | String | none | options: gradient/flashed/none | N
 delay | Number | 0 | \- | N
 loading | Boolean | true | \- | N
-rowCol | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string;  height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string;content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text'; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/skeleton/type.ts) | N
+rowCol | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/skeleton/type.ts) | N
 theme | String | text | options: avatar/image/text/paragraph | N
 
 ### CSS 变量
diff --git a/src/skeleton/skeleton.md b/src/skeleton/skeleton.md
index 2d9babfa..483c0903 100644
--- a/src/skeleton/skeleton.md
+++ b/src/skeleton/skeleton.md
@@ -9,7 +9,7 @@
 animation | String | none | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画。可选项：gradient/flashed/none | N
 delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
 loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N
-rowCol | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string;  height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string;content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text'; }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/skeleton/type.ts) | N
+rowCol | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/skeleton/type.ts) | N
 theme | String | text | 骨架图风格，有基础、头像组合等两大类。可选项：avatar/image/text/paragraph | N
 
 ### CSS 变量
diff --git a/src/skeleton/skeleton.tsx b/src/skeleton/skeleton.tsx
new file mode 100644
index 00000000..44799b22
--- /dev/null
+++ b/src/skeleton/skeleton.tsx
@@ -0,0 +1,138 @@
+import { h, defineComponent, watch, ref } from 'vue';
+import isNumber from 'lodash/isNumber';
+import isArray from 'lodash/isArray';
+import isFunction from 'lodash/isFunction';
+import { useContent } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
+import config from '../config';
+import SkeletonProps from './props';
+import { SkeletonRowCol, SkeletonRowColObj, TdSkeletonProps } from './type';
+import { ClassName, Styles } from '../common';
+
+const { prefix } = config;
+const name = `${prefix}-skeleton`;
+const ThemeMap: Record<TdSkeletonProps['theme'], SkeletonRowCol> = {
+  avatar: [{ type: 'circle', size: '48px' }],
+  image: [{ type: 'rect', size: '72px' }],
+  text: [
+    [
+      { width: '24%', height: '16px', marginRight: '16px' },
+      { width: '76%', height: '16px' },
+    ],
+    1,
+  ],
+  paragraph: [1, 1, 1, { width: '55%' }],
+};
+
+const getColItemStyle = (obj: SkeletonRowColObj): Styles => {
+  const styleName = [
+    'width',
+    'height',
+    'marginRight',
+    'marginLeft',
+    'margin',
+    'size',
+    'background',
+    'backgroundColor',
+    'borderRadius',
+  ];
+  const style: Styles = {};
+  styleName.forEach((name) => {
+    if (name in obj) {
+      const px = isNumber(obj[name]) ? `${obj[name]}px` : obj[name];
+      if (name === 'size') {
+        [style.width, style.height] = [px, px];
+      } else {
+        style[name] = px;
+      }
+    }
+  });
+  return style;
+};
+
+export default defineComponent({
+  name,
+  props: SkeletonProps,
+  setup(props, { slots }) {
+    const isShow = ref(false);
+    const renderContent = useContent();
+
+    const componentName = usePrefixClass('skeleton');
+
+    const getColItemClass = (obj: SkeletonRowColObj): ClassName => [
+      `${componentName.value}__col`,
+      `${componentName.value}--type-${obj.type || 'text'}`,
+      { [`${componentName.value}--animation-${props.animation}`]: props.animation },
+    ];
+
+    const renderCols = (_cols: Number | SkeletonRowColObj | Array<SkeletonRowColObj>) => {
+      let cols: Array<SkeletonRowColObj> = [];
+      if (isArray(_cols)) {
+        cols = _cols;
+      } else if (isNumber(_cols)) {
+        cols = new Array(_cols).fill({ type: 'text' });
+      } else {
+        cols = [_cols as SkeletonRowColObj];
+      }
+
+      return cols.map((obj) => (
+        <div class={getColItemClass(obj)} style={getColItemStyle(obj)}>
+          {isFunction(obj.content) ? obj.content(h) : obj.content}
+        </div>
+      ));
+    };
+
+    const renderRowCol = (_rowCol?: SkeletonRowCol) => {
+      const rowCol: SkeletonRowCol = _rowCol || props.rowCol;
+
+      return rowCol.map((item) => <div class={`${name}__row`}>{renderCols(item)}</div>);
+    };
+
+    watch(
+      () => props.loading,
+      (val) => {
+        if (!val || props.delay === 0) {
+          isShow.value = val;
+          return;
+        }
+        setTimeout(() => {
+          isShow.value = val;
+        }, props.delay);
+      },
+      { immediate: true },
+    );
+
+    return () => {
+      const content = renderContent('default', 'content');
+      if (slots.default) {
+        return <div>{content}</div>;
+      }
+
+      if (!isShow.value) {
+        return;
+      }
+
+      const children = [];
+
+      // 保持优先级： rowCol > theme，增加默认值兜底
+      if (props.rowCol) {
+        children.push(renderRowCol(props.rowCol));
+      } else if (props.theme) {
+        children.push(renderRowCol(ThemeMap[props.theme]));
+      } else if (!props.theme && !props.rowCol) {
+        // 什么都不传时，传入默认 rowCol
+        children.push(
+          renderRowCol([
+            [
+              { width: '24%', height: '16px', marginRight: '16px' },
+              { width: '76%', height: '16px' },
+            ],
+            1,
+          ]),
+        );
+      }
+
+      return <div class={componentName.value}>{children}</div>;
+    };
+  },
+});
diff --git a/src/skeleton/skeleton.vue b/src/skeleton/skeleton.vue
deleted file mode 100644
index 1f7313e1..00000000
--- a/src/skeleton/skeleton.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <div v-if="loading" :class="`${name}`">
-    <template v-if="parsedRowcols.length">
-      <div v-for="(row, index) of parsedRowcols" :key="`row-${index}`" :class="`${name}__row`">
-        <div v-for="(col, idx) of row" :key="`col-${idx}`" :class="col.class" :style="col.style"></div>
-      </div>
-    </template>
-  </div>
-  <slot v-else />
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, toRefs, watchEffect, ref } from 'vue';
-import isNumber from 'lodash/isNumber';
-import config from '../config';
-import SkeletonProps from './props';
-import { SkeletonRowColObj } from './type';
-import { ClassName, Styles } from '../common';
-
-const { prefix } = config;
-const name = `${prefix}-skeleton`;
-const ThemeMap = {
-  avatar: [{ type: 'circle', size: '48px' }],
-  image: [{ type: 'rect', size: '72px' }],
-  text: [
-    [
-      { width: '24%', height: '16px', marginRight: '16px' },
-      { width: '76%', height: '16px' },
-    ],
-    1,
-  ],
-  paragraph: [1, 1, 1, { width: '55%' }],
-};
-
-export default defineComponent({
-  name,
-  props: SkeletonProps,
-  setup(props) {
-    const { animation } = toRefs(props);
-    const rowCols = ref<any>([]);
-
-    watchEffect(() => {
-      if (props.rowCol?.length) {
-        rowCols.value = [...props.rowCol];
-      } else {
-        rowCols.value = [...ThemeMap[props.theme || 'text']];
-      }
-    });
-
-    const getColItemClass = (obj: SkeletonRowColObj): ClassName => [
-      `${name}__col`,
-      `${name}--type-${obj.type || 'text'}`,
-      `${name}--animation-${animation.value}`,
-    ];
-
-    const getColItemStyle = (obj: SkeletonRowColObj): Styles => {
-      const styleName = [
-        'width',
-        'height',
-        'marginRight',
-        'marginLeft',
-        'margin',
-        'size',
-        'background',
-        'backgroundColor',
-        'borderRadius',
-      ];
-      const style: Styles = {};
-      styleName.forEach((name) => {
-        if (name in obj) {
-          const px = isNumber(obj[name]) ? `${obj[name]}px` : obj[name];
-          if (name === 'size') {
-            [style.width, style.height] = [px, px];
-          } else {
-            style[name] = px;
-          }
-        }
-      });
-      return style;
-    };
-
-    const parsedRowcols = computed(() => {
-      return rowCols.value.map((item: any) => {
-        if (isNumber(item)) {
-          return [
-            {
-              class: getColItemClass({ type: 'text' }),
-              style: {},
-            },
-          ];
-        }
-        if (Array.isArray(item)) {
-          return item.map((col) => {
-            return {
-              ...col,
-              class: getColItemClass(col),
-              style: getColItemStyle(col),
-            };
-          });
-        }
-
-        const nItem = item as SkeletonRowColObj;
-        return [
-          {
-            ...nItem,
-            class: getColItemClass(nItem),
-            style: getColItemStyle(nItem),
-          },
-        ];
-      });
-    });
-
-    return {
-      name,
-      parsedRowcols,
-    };
-  },
-});
-</script>
diff --git a/src/tag/check-tag-props.ts b/src/tag/check-tag-props.ts
index 788c7587..b7ac805a 100644
--- a/src/tag/check-tag-props.ts
+++ b/src/tag/check-tag-props.ts
@@ -18,10 +18,7 @@ export default {
     default: undefined,
   },
   /** 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性 */
-  defaultChecked: {
-    type: Boolean,
-    default: undefined,
-  },
+  defaultChecked: Boolean,
   /** 标签是否可关闭 */
   closable: Boolean,
   /** 组件子元素；传入数组时：[选中内容，非选中内容] */
diff --git a/src/tag/check-tag.tsx b/src/tag/check-tag.tsx
new file mode 100644
index 00000000..3c03036a
--- /dev/null
+++ b/src/tag/check-tag.tsx
@@ -0,0 +1,90 @@
+import { defineComponent, computed, toRefs } from 'vue';
+import { CloseIcon } from 'tdesign-icons-vue-next';
+import config from '../config';
+import CheckTagProps from './check-tag-props';
+import { usePrefixClass } from '../hooks/useClass';
+import { useContent, useTNodeJSX } from '../hooks/tnode';
+import { useVModel } from '../shared';
+
+const { prefix } = config;
+const name = `${prefix}-check-tag`;
+
+export default defineComponent({
+  name,
+  props: CheckTagProps,
+  setup(props) {
+    const tagClass = usePrefixClass('tag');
+    const renderTNodeJSX = useTNodeJSX();
+    const renderContent = useContent();
+
+    const { checked, modelValue } = toRefs(props);
+    const [innerChecked, setInnerChecked] = useVModel(
+      checked,
+      modelValue,
+      props.defaultChecked,
+      props.onChange,
+      'checked',
+    );
+
+    const contentIsArray = computed(() => {
+      if (Array.isArray(props.content) && props.content.length === 2) {
+        return true;
+      }
+      return false;
+    });
+
+    const tagClasses = computed(() => [
+      `${tagClass.value}`,
+      `${tagClass.value}--checkable`,
+      `${tagClass.value}--${props.shape}`,
+      `${tagClass.value}--${innerChecked.value ? 'primary' : 'default'}`,
+      `${tagClass.value}--${props.size}`,
+      `${tagClass.value}--${props.variant}`,
+      {
+        [`${tagClass.value}--closable`]: props.closable,
+        [`${tagClass.value}--disabled`]: props.disabled,
+        [`${tagClass.value}--checked`]: !props.disabled && innerChecked.value,
+      },
+    ]);
+
+    const handleClick = (e: MouseEvent) => {
+      if (!props.disabled) {
+        props.onClick?.({ e });
+        setInnerChecked(!innerChecked.value);
+      }
+    };
+
+    const handleClose = (e: MouseEvent): void => {
+      e.stopPropagation();
+      if (!props.disabled) {
+        props.onClose?.({ e });
+      }
+    };
+
+    return () => {
+      const icon = renderTNodeJSX('icon');
+
+      const readerText = () => {
+        if (contentIsArray.value) {
+          return innerChecked.value ? props.content[0] : props.content[1];
+        }
+
+        const content = renderContent('default', 'content');
+
+        return content;
+      };
+
+      return (
+        <span class={tagClasses.value} aria-disabled={props.disabled} role="button" onClick={handleClick}>
+          {icon && <span class={`${tagClass.value}__icon`}>{icon}</span>}
+          <span class={`${tagClass.value}__text`}>{readerText()}</span>
+          {props.closable && (
+            <span class={`${tagClass.value}__icon-close`} onClick={handleClose}>
+              <CloseIcon />
+            </span>
+          )}
+        </span>
+      );
+    };
+  },
+});
diff --git a/src/tag/check-tag.vue b/src/tag/check-tag.vue
deleted file mode 100644
index 8ceaaefd..00000000
--- a/src/tag/check-tag.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <span :class="classes" :aria-disabled="disabled" role="button" @click="handleClick">
-    <span :class="`${baseClass}__icon`">
-      <t-node :content="iconContent"></t-node>
-    </span>
-    <span :class="`${baseClass}__text`">
-      <template v-if="contentIsArray && content">
-        {{ innerChecked ? content[0] : content[1] }}
-      </template>
-      <t-node v-else :content="tagContent"></t-node>
-    </span>
-  </span>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, toRefs, getCurrentInstance } from 'vue';
-import config from '../config';
-import CheckTagProps from './check-tag-props';
-import { renderContent, renderTNode, TNode, useVModel } from '../shared';
-
-const { prefix } = config;
-const name = `${prefix}-check-tag`;
-
-const CheckTag = defineComponent({
-  name,
-  components: {
-    TNode,
-  },
-  props: CheckTagProps,
-  emits: ['change', 'click', 'update:checked', 'update:modelValue'],
-  setup(props) {
-    const internalInstance = getCurrentInstance();
-    const tagContent = computed(() => renderContent(internalInstance, 'default', 'content'));
-    const iconContent = computed(() => renderTNode(internalInstance, 'icon'));
-    const baseClass = `${prefix}-tag`;
-
-    const { checked, modelValue } = toRefs(props);
-    const [innerChecked, setInnerChecked] = useVModel(
-      checked,
-      modelValue,
-      props.defaultChecked,
-      props.onChange,
-      'checked',
-    );
-
-    const contentIsArray = computed(() => {
-      if (Array.isArray(props.content) && props.content.length === 2) {
-        return true;
-      }
-      return false;
-    });
-
-    const classes = computed(() => [
-      `${baseClass}`,
-      `${baseClass}--checkable`,
-      `${baseClass}--${props.shape}`,
-      `${baseClass}--${innerChecked.value ? 'primary' : 'default'}`,
-      `${baseClass}--${props.size}`,
-      `${baseClass}--${props.variant}`,
-      {
-        [`${prefix}-is-disabled ${baseClass}--disabled`]: props.disabled,
-        [`${prefix}-is-checked ${baseClass}--checked`]: !props.disabled && innerChecked.value,
-      },
-    ]);
-
-    const handleClick = (e: MouseEvent) => {
-      if (!props.disabled) {
-        props.onClick?.({ e });
-        setInnerChecked(!innerChecked.value);
-      }
-    };
-
-    return {
-      contentIsArray,
-      baseClass,
-      classes,
-      handleClick,
-      iconContent,
-      tagContent,
-      innerChecked,
-    };
-  },
-});
-
-export default CheckTag;
-</script>
diff --git a/src/tag/index.ts b/src/tag/index.ts
index 49872bfd..a0400ed2 100644
--- a/src/tag/index.ts
+++ b/src/tag/index.ts
@@ -1,5 +1,5 @@
 import LocalTag from './tag';
-import LocalCheckTag from './check-tag.vue';
+import LocalCheckTag from './check-tag';
 import { withInstall, WithInstallType } from '../shared';
 import { TdCheckTagProps, TdTagProps } from './type';
 
diff --git a/src/tag/tag.en-US.md b/src/tag/tag.en-US.md
index 4c7367ec..c455ae21 100644
--- a/src/tag/tag.en-US.md
+++ b/src/tag/tag.en-US.md
@@ -31,8 +31,8 @@ close | `(context: { e: MouseEvent })` | \-
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-checked | Boolean | undefined | `v-model` and `v-model:checked` is supported | N
-defaultChecked | Boolean | undefined | uncontrolled property | N
+checked | Boolean | - | `v-model` and `v-model:checked` is supported | N
+defaultChecked | Boolean | - | uncontrolled property | N
 closable | Boolean | false | \- | N
 content | String / Number / Array / Slot / Function | - | Typescript：`string \| number \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
@@ -43,7 +43,7 @@ size | String | medium | options: small/medium/large。Typescript：`SizeEnum`
 variant | String | dark | options: dark/light/outline/light-outline | N
 onChange | Function |  | Typescript：`(checked: boolean) => void`<br/> | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
-onClose | Function |  | Typescript：`() => void`<br/> | N
+onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 
 ### CheckTag Events
 
@@ -51,7 +51,7 @@ name | params | description
 -- | -- | --
 change | `(checked: boolean)` | \-
 click | `(context: { e: MouseEvent })` | \-
-close | \- | \-
+close | `(context: { e: MouseEvent })` | \-
 
 ### CSS 变量
 
diff --git a/src/tag/tag.md b/src/tag/tag.md
index e2510114..a4183d76 100644
--- a/src/tag/tag.md
+++ b/src/tag/tag.md
@@ -31,8 +31,8 @@ close | `(context: { e: MouseEvent })` | 如果关闭按钮存在，点击关闭
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。支持语法糖 `v-model` 或 `v-model:checked` | N
-defaultChecked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
+checked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。支持语法糖 `v-model` 或 `v-model:checked` | N
+defaultChecked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
 closable | Boolean | false | 标签是否可关闭 | N
 content | String / Number / Array / Slot / Function | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 组件子元素，默认插槽。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
@@ -43,7 +43,7 @@ size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类
 variant | String | dark | 标签风格变体。可选项：dark/light/outline/light-outline | N
 onChange | Function |  | TS 类型：`(checked: boolean) => void`<br/>状态切换时触发 | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击标签时触发 | N
-onClose | Function |  | TS 类型：`() => void`<br/>如果关闭按钮存在，点击关闭按钮时触发 | N
+onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果关闭按钮存在，点击关闭按钮时触发 | N
 
 ### CheckTag Events
 
@@ -51,7 +51,7 @@ onClose | Function |  | TS 类型：`() => void`<br/>如果关闭按钮存在，
 -- | -- | --
 change | `(checked: boolean)` | 状态切换时触发
 click | `(context: { e: MouseEvent })` | 点击标签时触发
-close | \- | 如果关闭按钮存在，点击关闭按钮时触发
+close | `(context: { e: MouseEvent })` | 如果关闭按钮存在，点击关闭按钮时触发
 
 ### CSS 变量
 
diff --git a/src/tag/tag.tsx b/src/tag/tag.tsx
index 5f0ee3b7..ca4f755e 100644
--- a/src/tag/tag.tsx
+++ b/src/tag/tag.tsx
@@ -3,6 +3,7 @@ import { CloseIcon } from 'tdesign-icons-vue-next';
 import { useTNodeJSX, useContent } from '../hooks/tnode';
 import config from '../config';
 import TagProps from './props';
+import { usePrefixClass } from '../hooks/useClass';
 
 const { prefix } = config;
 const name = `${prefix}-tag`;
@@ -15,7 +16,7 @@ export default defineComponent({
   props: TagProps,
   emits: ['close', 'click'],
   setup(props) {
-    const baseClass = name;
+    const tagClass = usePrefixClass('tag');
     const renderTNodeJSX = useTNodeJSX();
     const renderContent = useContent();
 
@@ -25,19 +26,19 @@ export default defineComponent({
         : {};
     });
 
-    const classes = computed(() => [
-      `${baseClass}`,
-      `${baseClass}--${props.theme}`,
-      `${baseClass}--${props.shape}`,
-      `${baseClass}--${props.variant}`,
-      `${baseClass}--${props.size}`,
+    const tagClasses = computed(() => [
+      `${tagClass.value}`,
+      `${tagClass.value}--${props.theme}`,
+      `${tagClass.value}--${props.shape}`,
+      `${tagClass.value}--${props.variant}`,
+      `${tagClass.value}--${props.size}`,
       {
-        [`${prefix}-is-closable ${baseClass}--closable`]: props.closable,
-        [`${prefix}-is-disabled ${baseClass}--disabled`]: props.disabled,
+        [`${tagClass.value}--closable`]: props.closable,
+        [`${tagClass.value}--disabled`]: props.disabled,
       },
     ]);
 
-    const onClickClose = (e: MouseEvent): void => {
+    const handleClose = (e: MouseEvent): void => {
       e.stopPropagation();
       if (!props.disabled) {
         props.onClose?.({ e });
@@ -57,16 +58,16 @@ export default defineComponent({
       const icon = renderTNodeJSX('icon');
       return (
         <span
-          class={classes.value}
+          class={tagClasses.value}
           style={tagStyle.value}
           aria-disabled={props.disabled}
           role="button"
           onClick={handleClick}
         >
-          <span class={`${baseClass}__icon`}>{icon}</span>
-          <span class={`${baseClass}__text`}>{tagContent}</span>
+          {icon && <span class={`${tagClass.value}__icon`}>{icon}</span>}
+          <span class={`${tagClass.value}__text`}>{tagContent}</span>
           {props.closable && (
-            <span class={`${baseClass}__icon-close`} onClick={onClickClose}>
+            <span class={`${tagClass.value}__icon-close`} onClick={handleClose}>
               <close-icon />
             </span>
           )}
diff --git a/src/tag/type.ts b/src/tag/type.ts
index cbc0bdef..e19f0fb0 100644
--- a/src/tag/type.ts
+++ b/src/tag/type.ts
@@ -124,5 +124,5 @@ export interface TdCheckTagProps {
   /**
    * 如果关闭按钮存在，点击关闭按钮时触发
    */
-  onClose?: () => void;
+  onClose?: (context: { e: MouseEvent }) => void;
 }


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 4071190c..92244716 100644
--- a/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
@@ -296,6 +296,7 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
           data-v-806aae90=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -303,7 +304,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -312,7 +315,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -322,16 +327,20 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton item"
           data-v-806aae90=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -339,7 +348,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -348,7 +359,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -358,16 +371,20 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton item"
           data-v-806aae90=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -375,7 +392,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -384,7 +403,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -394,16 +415,20 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton item"
           data-v-806aae90=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -411,7 +436,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -420,7 +447,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -430,16 +459,20 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton item"
           data-v-806aae90=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -447,7 +480,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -456,7 +491,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -466,16 +503,20 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton item"
           data-v-806aae90=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -483,7 +524,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -492,7 +535,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -502,10 +547,13 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         
       </div>
diff --git a/src/badge/__test__/index.test.jsx b/src/badge/__test__/index.test.jsx
index b92c2538..ccddbc44 100644
--- a/src/badge/__test__/index.test.jsx
+++ b/src/badge/__test__/index.test.jsx
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import Badge from '../badge.vue';
-import Button from '../../button/button.vue';
+import Button from '../../button/button';
 import config from '../../config';
 
 const { prefix } = config;
diff --git a/src/button/__test__/index.test.jsx b/src/button/__test__/index.test.jsx
index eff53606..736a54ea 100644
--- a/src/button/__test__/index.test.jsx
+++ b/src/button/__test__/index.test.jsx
@@ -2,7 +2,7 @@ import { h } from 'vue';
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
 import { AppIcon as TIconApp } from 'tdesign-icons-vue-next';
-import Button from '../button.vue';
+import Button from '../button';
 import Loading from '../../loading';
 
 const prefix = 't';
diff --git a/src/dialog/__test__/index.test.jsx b/src/dialog/__test__/index.test.jsx
index be5ce079..862aba72 100644
--- a/src/dialog/__test__/index.test.jsx
+++ b/src/dialog/__test__/index.test.jsx
@@ -1,7 +1,7 @@
 import { config, mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
 import Dialog from '../dialog.vue';
-import Button from '../../button/button.vue';
+import Button from '../../button/button';
 import { CloseIcon } from 'tdesign-icons-vue-next';
 
 import prefixConfig from '../../config';
diff --git a/src/divider/__test__/index.test.jsx b/src/divider/__test__/index.test.jsx
index 722a03a1..b3bf500d 100644
--- a/src/divider/__test__/index.test.jsx
+++ b/src/divider/__test__/index.test.jsx
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
-import Divider from '../divider.vue';
+import Divider from '../divider';
 import config from '../../config';
 
 const { prefix } = config;
diff --git a/src/fab/__test__/index.test.jsx b/src/fab/__test__/index.test.jsx
index 4807e9ab..d635384e 100644
--- a/src/fab/__test__/index.test.jsx
+++ b/src/fab/__test__/index.test.jsx
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import Fab from '../fab.vue';
+import Fab from '../fab';
 import { AppIcon as TIconApp, MoreIcon } from 'tdesign-icons-vue-next';
 
 describe('fab', () => {
diff --git a/src/link/__test__/__snapshots__/demo.test.jsx.snap b/src/link/__test__/__snapshots__/demo.test.jsx.snap
index b4a4496e..186c185c 100644
--- a/src/link/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/link/__test__/__snapshots__/demo.test.jsx.snap
@@ -12,7 +12,7 @@ exports[`Link > Link baseVue demo works fine 1`] = `
     href="/mobile-vue/overview"
     target=""
   >
-    <!--v-if-->
+    <!---->
     <span
       class="t-link__content"
     >
@@ -20,7 +20,7 @@ exports[`Link > Link baseVue demo works fine 1`] = `
       跳转链接
       
     </span>
-    <!--v-if-->
+    <!---->
   </a>
   <a
     aria-disabled="false"
@@ -28,7 +28,7 @@ exports[`Link > Link baseVue demo works fine 1`] = `
     data-v-8b54d308=""
     target=""
   >
-    <!--v-if-->
+    <!---->
     <span
       class="t-link__content"
     >
@@ -36,7 +36,7 @@ exports[`Link > Link baseVue demo works fine 1`] = `
       跳转链接
       
     </span>
-    <!--v-if-->
+    <!---->
   </a>
 </div>
 `;
@@ -52,7 +52,7 @@ exports[`Link > Link linkSizeVue demo works fine 1`] = `
     data-v-55ae5f74=""
     target=""
   >
-    <!--v-if-->
+    <!---->
     <span
       class="t-link__content"
     >
@@ -61,7 +61,7 @@ exports[`Link > Link linkSizeVue demo works fine 1`] = `
       
     </span>
     <span
-      class="t-link__suffix-icon t-class-suffix-icon"
+      class="t-link__suffix-icon"
     >
       
       <svg
@@ -86,7 +86,7 @@ exports[`Link > Link linkSizeVue demo works fine 1`] = `
     data-v-55ae5f74=""
     target=""
   >
-    <!--v-if-->
+    <!---->
     <span
       class="t-link__content"
     >
@@ -95,7 +95,7 @@ exports[`Link > Link linkSizeVue demo works fine 1`] = `
       
     </span>
     <span
-      class="t-link__suffix-icon t-class-suffix-icon"
+      class="t-link__suffix-icon"
     >
       
       <svg
@@ -120,7 +120,7 @@ exports[`Link > Link linkSizeVue demo works fine 1`] = `
     data-v-55ae5f74=""
     target=""
   >
-    <!--v-if-->
+    <!---->
     <span
       class="t-link__content"
     >
@@ -129,7 +129,7 @@ exports[`Link > Link linkSizeVue demo works fine 1`] = `
       
     </span>
     <span
-      class="t-link__suffix-icon t-class-suffix-icon"
+      class="t-link__suffix-icon"
     >
       
       <svg
@@ -197,7 +197,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           href="/mobile-vue/overview"
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -205,7 +205,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             跳转链接
             
           </span>
-          <!--v-if-->
+          <!---->
         </a>
         <a
           aria-disabled="false"
@@ -213,7 +213,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-8b54d308=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -221,7 +221,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             跳转链接
             
           </span>
-          <!--v-if-->
+          <!---->
         </a>
       </div>
       
@@ -254,7 +254,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-ed7bec9e=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -262,7 +262,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             跳转链接
             
           </span>
-          <!--v-if-->
+          <!---->
         </a>
         <a
           aria-disabled="false"
@@ -270,7 +270,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-ed7bec9e=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -278,7 +278,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             跳转链接
             
           </span>
-          <!--v-if-->
+          <!---->
         </a>
       </div>
       
@@ -312,7 +312,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           target=""
         >
           <span
-            class="t-link__prefix-icon t-class-prefix-icon"
+            class="t-link__prefix-icon"
           >
             
             <svg
@@ -337,7 +337,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
              跳转链接 
             
           </span>
-          <!--v-if-->
+          <!---->
         </a>
         <a
           aria-disabled="false"
@@ -346,7 +346,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           target=""
         >
           <span
-            class="t-link__prefix-icon t-class-prefix-icon"
+            class="t-link__prefix-icon"
           >
             
             <svg
@@ -371,7 +371,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
              跳转链接 
             
           </span>
-          <!--v-if-->
+          <!---->
         </a>
       </div>
       
@@ -404,7 +404,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-c6b7a388=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -413,7 +413,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -438,7 +438,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-c6b7a388=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -447,7 +447,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -502,7 +502,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-004b20ae=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -511,7 +511,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -536,7 +536,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-004b20ae=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -545,7 +545,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -570,7 +570,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-004b20ae=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -579,7 +579,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -609,7 +609,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-004b20ae=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -618,7 +618,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -643,7 +643,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-004b20ae=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -652,7 +652,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -704,7 +704,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-0c766346=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -713,7 +713,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -738,7 +738,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-0c766346=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -747,7 +747,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -772,7 +772,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-0c766346=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -781,7 +781,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -811,7 +811,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-0c766346=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -820,7 +820,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -845,7 +845,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-0c766346=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -854,7 +854,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -909,7 +909,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-55ae5f74=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -918,7 +918,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -943,7 +943,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-55ae5f74=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -952,7 +952,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -977,7 +977,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
           data-v-55ae5f74=""
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -986,7 +986,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = `
             
           </span>
           <span
-            class="t-link__suffix-icon t-class-suffix-icon"
+            class="t-link__suffix-icon"
           >
             
             <svg
@@ -1024,7 +1024,7 @@ exports[`Link > Link prefixVue demo works fine 1`] = `
     target=""
   >
     <span
-      class="t-link__prefix-icon t-class-prefix-icon"
+      class="t-link__prefix-icon"
     >
       
       <svg
@@ -1049,7 +1049,7 @@ exports[`Link > Link prefixVue demo works fine 1`] = `
        跳转链接 
       
     </span>
-    <!--v-if-->
+    <!---->
   </a>
   <a
     aria-disabled="false"
@@ -1058,7 +1058,7 @@ exports[`Link > Link prefixVue demo works fine 1`] = `
     target=""
   >
     <span
-      class="t-link__prefix-icon t-class-prefix-icon"
+      class="t-link__prefix-icon"
     >
       
       <svg
@@ -1083,7 +1083,7 @@ exports[`Link > Link prefixVue demo works fine 1`] = `
        跳转链接 
       
     </span>
-    <!--v-if-->
+    <!---->
   </a>
 </div>
 `;
@@ -1103,7 +1103,7 @@ exports[`Link > Link statusVue demo works fine 1`] = `
       data-v-0c766346=""
       target=""
     >
-      <!--v-if-->
+      <!---->
       <span
         class="t-link__content"
       >
@@ -1112,7 +1112,7 @@ exports[`Link > Link statusVue demo works fine 1`] = `
         
       </span>
       <span
-        class="t-link__suffix-icon t-class-suffix-icon"
+        class="t-link__suffix-icon"
       >
         
         <svg
@@ -1137,7 +1137,7 @@ exports[`Link > Link statusVue demo works fine 1`] = `
       data-v-0c766346=""
       target=""
     >
-      <!--v-if-->
+      <!---->
       <span
         class="t-link__content"
       >
@@ -1146,7 +1146,7 @@ exports[`Link > Link statusVue demo works fine 1`] = `
         
       </span>
       <span
-        class="t-link__suffix-icon t-class-suffix-icon"
+        class="t-link__suffix-icon"
       >
         
         <svg
@@ -1171,7 +1171,7 @@ exports[`Link > Link statusVue demo works fine 1`] = `
       data-v-0c766346=""
       target=""
     >
-      <!--v-if-->
+      <!---->
       <span
         class="t-link__content"
       >
@@ -1180,7 +1180,7 @@ exports[`Link > Link statusVue demo works fine 1`] = `
         
       </span>
       <span
-        class="t-link__suffix-icon t-class-suffix-icon"
+        class="t-link__suffix-icon"
       >
         
         <svg
@@ -1210,7 +1210,7 @@ exports[`Link > Link statusVue demo works fine 1`] = `
       data-v-0c766346=""
       target=""
     >
-      <!--v-if-->
+      <!---->
       <span
         class="t-link__content"
       >
@@ -1219,7 +1219,7 @@ exports[`Link > Link statusVue demo works fine 1`] = `
         
       </span>
       <span
-        class="t-link__suffix-icon t-class-suffix-icon"
+        class="t-link__suffix-icon"
       >
         
         <svg
@@ -1244,7 +1244,7 @@ exports[`Link > Link statusVue demo works fine 1`] = `
       data-v-0c766346=""
       target=""
     >
-      <!--v-if-->
+      <!---->
       <span
         class="t-link__content"
       >
@@ -1253,7 +1253,7 @@ exports[`Link > Link statusVue demo works fine 1`] = `
         
       </span>
       <span
-        class="t-link__suffix-icon t-class-suffix-icon"
+        class="t-link__suffix-icon"
       >
         
         <svg
@@ -1288,7 +1288,7 @@ exports[`Link > Link suffixVue demo works fine 1`] = `
     data-v-c6b7a388=""
     target=""
   >
-    <!--v-if-->
+    <!---->
     <span
       class="t-link__content"
     >
@@ -1297,7 +1297,7 @@ exports[`Link > Link suffixVue demo works fine 1`] = `
       
     </span>
     <span
-      class="t-link__suffix-icon t-class-suffix-icon"
+      class="t-link__suffix-icon"
     >
       
       <svg
@@ -1322,7 +1322,7 @@ exports[`Link > Link suffixVue demo works fine 1`] = `
     data-v-c6b7a388=""
     target=""
   >
-    <!--v-if-->
+    <!---->
     <span
       class="t-link__content"
     >
@@ -1331,7 +1331,7 @@ exports[`Link > Link suffixVue demo works fine 1`] = `
       
     </span>
     <span
-      class="t-link__suffix-icon t-class-suffix-icon"
+      class="t-link__suffix-icon"
     >
       
       <svg
@@ -1368,7 +1368,7 @@ exports[`Link > Link themeVue demo works fine 1`] = `
       data-v-004b20ae=""
       target=""
     >
-      <!--v-if-->
+      <!---->
       <span
         class="t-link__content"
       >
@@ -1377,7 +1377,7 @@ exports[`Link > Link themeVue demo works fine 1`] = `
         
       </span>
       <span
-        class="t-link__suffix-icon t-class-suffix-icon"
+        class="t-link__suffix-icon"
       >
         
         <svg
@@ -1402,7 +1402,7 @@ exports[`Link > Link themeVue demo works fine 1`] = `
       data-v-004b20ae=""
       target=""
     >
-      <!--v-if-->
+      <!---->
       <span
         class="t-link__content"
       >
@@ -1411,7 +1411,7 @@ exports[`Link > Link themeVue demo works fine 1`] = `
         
       </span>
       <span
-        class="t-link__suffix-icon t-class-suffix-icon"
+        class="t-link__suffix-icon"
       >
         
         <svg
@@ -1436,7 +1436,7 @@ exports[`Link > Link themeVue demo works fine 1`] = `
       data-v-004b20ae=""
       target=""
     >
-      <!--v-if-->
+      <!---->
       <span
         class="t-link__content"
       >
@@ -1445,7 +1445,7 @@ exports[`Link > Link themeVue demo works fine 1`] = `
         
       </span>
       <span
-        class="t-link__suffix-icon t-class-suffix-icon"
+        class="t-link__suffix-icon"
       >
         
         <svg
@@ -1475,7 +1475,7 @@ exports[`Link > Link themeVue demo works fine 1`] = `
       data-v-004b20ae=""
       target=""
     >
-      <!--v-if-->
+      <!---->
       <span
         class="t-link__content"
       >
@@ -1484,7 +1484,7 @@ exports[`Link > Link themeVue demo works fine 1`] = `
         
       </span>
       <span
-        class="t-link__suffix-icon t-class-suffix-icon"
+        class="t-link__suffix-icon"
       >
         
         <svg
@@ -1509,7 +1509,7 @@ exports[`Link > Link themeVue demo works fine 1`] = `
       data-v-004b20ae=""
       target=""
     >
-      <!--v-if-->
+      <!---->
       <span
         class="t-link__content"
       >
@@ -1518,7 +1518,7 @@ exports[`Link > Link themeVue demo works fine 1`] = `
         
       </span>
       <span
-        class="t-link__suffix-icon t-class-suffix-icon"
+        class="t-link__suffix-icon"
       >
         
         <svg
@@ -1553,7 +1553,7 @@ exports[`Link > Link underlineVue demo works fine 1`] = `
     data-v-ed7bec9e=""
     target=""
   >
-    <!--v-if-->
+    <!---->
     <span
       class="t-link__content"
     >
@@ -1561,7 +1561,7 @@ exports[`Link > Link underlineVue demo works fine 1`] = `
       跳转链接
       
     </span>
-    <!--v-if-->
+    <!---->
   </a>
   <a
     aria-disabled="false"
@@ -1569,7 +1569,7 @@ exports[`Link > Link underlineVue demo works fine 1`] = `
     data-v-ed7bec9e=""
     target=""
   >
-    <!--v-if-->
+    <!---->
     <span
       class="t-link__content"
     >
@@ -1577,7 +1577,7 @@ exports[`Link > Link underlineVue demo works fine 1`] = `
       跳转链接
       
     </span>
-    <!--v-if-->
+    <!---->
   </a>
 </div>
 `;
diff --git a/src/link/__test__/index.test.jsx b/src/link/__test__/index.test.jsx
index e32bf68e..f3b7693f 100644
--- a/src/link/__test__/index.test.jsx
+++ b/src/link/__test__/index.test.jsx
@@ -1,8 +1,7 @@
-import { h } from 'vue';
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
 import { Icon, AppIcon as TIconApp } from 'tdesign-icons-vue-next';
-import Link from '../link.vue';
+import Link from '../link';
 // const iconFunc = () => h(TIconApp);
 
 // every component needs four parts: props/events/slots/functions.
diff --git a/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap b/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap
index 80d3e1b1..76093e55 100644
--- a/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap
@@ -120,7 +120,7 @@ exports[`NoticeBar > NoticeBar customizationVue demo works fine 1`] = `
           style="margin-left: 2px;"
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
@@ -128,7 +128,7 @@ exports[`NoticeBar > NoticeBar customizationVue demo works fine 1`] = `
             详情
             
           </span>
-          <!--v-if-->
+          <!---->
         </a>
         
       </span>
@@ -200,7 +200,7 @@ exports[`NoticeBar > NoticeBar eventVue demo works fine 1`] = `
             style="margin-left: 5px;"
             target=""
           >
-            <!--v-if-->
+            <!---->
             <span
               class="t-link__content"
             >
@@ -208,7 +208,7 @@ exports[`NoticeBar > NoticeBar eventVue demo works fine 1`] = `
               详情
               
             </span>
-            <!--v-if-->
+            <!---->
           </a>
           
         </span>
@@ -566,7 +566,7 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
                 style="margin-left: 5px;"
                 target=""
               >
-                <!--v-if-->
+                <!---->
                 <span
                   class="t-link__content"
                 >
@@ -574,7 +574,7 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
                   详情
                   
                 </span>
-                <!--v-if-->
+                <!---->
               </a>
               
             </span>
@@ -782,7 +782,7 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
                 style="margin-left: 2px;"
                 target=""
               >
-                <!--v-if-->
+                <!---->
                 <span
                   class="t-link__content"
                 >
@@ -790,7 +790,7 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
                   详情
                   
                 </span>
-                <!--v-if-->
+                <!---->
               </a>
               
             </span>
diff --git a/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap b/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
index 83122011..16d4106f 100644
--- a/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
@@ -65,13 +65,16 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
               data-v-9c770ec0=""
             >
               
+              
               <div
                 class="t-skeleton__row"
               >
                 
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -81,7 +84,9 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 100px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -91,23 +96,29 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               
+              
             </div>
             <div
               class="t-skeleton item"
               data-v-9c770ec0=""
             >
               
+              
               <div
                 class="t-skeleton__row"
               >
                 
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -117,7 +128,9 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 100px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -127,23 +140,29 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               
+              
             </div>
             <div
               class="t-skeleton item"
               data-v-9c770ec0=""
             >
               
+              
               <div
                 class="t-skeleton__row"
               >
                 
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -153,7 +172,9 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 100px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -163,23 +184,29 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               
+              
             </div>
             <div
               class="t-skeleton item"
               data-v-9c770ec0=""
             >
               
+              
               <div
                 class="t-skeleton__row"
               >
                 
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -189,7 +216,9 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 100px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -199,23 +228,29 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               
+              
             </div>
             <div
               class="t-skeleton item"
               data-v-9c770ec0=""
             >
               
+              
               <div
                 class="t-skeleton__row"
               >
                 
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -225,7 +260,9 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 100px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -235,23 +272,29 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               
+              
             </div>
             <div
               class="t-skeleton item"
               data-v-9c770ec0=""
             >
               
+              
               <div
                 class="t-skeleton__row"
               >
                 
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -261,7 +304,9 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 100px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -271,10 +316,13 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               
+              
             </div>
             
           </div>
@@ -396,13 +444,16 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                 data-v-9c770ec0=""
               >
                 
+                
                 <div
                   class="t-skeleton__row"
                 >
                   
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -412,7 +463,9 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 100px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -422,23 +475,29 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 
+                
               </div>
               <div
                 class="t-skeleton item"
                 data-v-9c770ec0=""
               >
                 
+                
                 <div
                   class="t-skeleton__row"
                 >
                   
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -448,7 +507,9 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 100px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -458,23 +519,29 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 
+                
               </div>
               <div
                 class="t-skeleton item"
                 data-v-9c770ec0=""
               >
                 
+                
                 <div
                   class="t-skeleton__row"
                 >
                   
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -484,7 +551,9 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 100px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -494,23 +563,29 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 
+                
               </div>
               <div
                 class="t-skeleton item"
                 data-v-9c770ec0=""
               >
                 
+                
                 <div
                   class="t-skeleton__row"
                 >
                   
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -520,7 +595,9 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 100px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -530,23 +607,29 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 
+                
               </div>
               <div
                 class="t-skeleton item"
                 data-v-9c770ec0=""
               >
                 
+                
                 <div
                   class="t-skeleton__row"
                 >
                   
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -556,7 +639,9 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 100px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -566,23 +651,29 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 
+                
               </div>
               <div
                 class="t-skeleton item"
                 data-v-9c770ec0=""
               >
                 
+                
                 <div
                   class="t-skeleton__row"
                 >
                   
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -592,7 +683,9 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 100px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -602,10 +695,13 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 
+                
               </div>
               
             </div>
diff --git a/src/skeleton/__test__/__snapshots__/demo.test.jsx.snap b/src/skeleton/__test__/__snapshots__/demo.test.jsx.snap
index 73f9bb79..b0bfe60e 100644
--- a/src/skeleton/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/skeleton/__test__/__snapshots__/demo.test.jsx.snap
@@ -23,13 +23,16 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
         data-v-5431dabc=""
       >
         
+        
         <div
           class="t-skeleton__row"
         >
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -38,7 +41,9 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -47,7 +52,9 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -57,10 +64,13 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
             style="width: 55%;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         
+        
       </div>
     </div>
   </div>
@@ -82,13 +92,16 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
         data-v-5431dabc=""
       >
         
+        
         <div
           class="t-skeleton__row"
         >
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -97,7 +110,9 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -106,7 +121,9 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -116,10 +133,13 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
             style="width: 55%;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         
+        
       </div>
     </div>
   </div>
@@ -141,6 +161,7 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
       data-v-b5595f68=""
     >
       
+      
       <div
         class="t-skeleton__row"
       >
@@ -148,16 +169,20 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
         <div
           class="t-skeleton__col t-skeleton--type-circle t-skeleton--animation-none"
           style="width: 48px; height: 48px;"
-        />
+        >
+          <!---->
+        </div>
         
       </div>
       
+      
     </div>
     <div
       class="t-skeleton group-content"
       data-v-b5595f68=""
     >
       
+      
       <div
         class="t-skeleton__row"
       >
@@ -165,7 +190,9 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
         <div
           class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
           style="width: 50%;"
-        />
+        >
+          <!---->
+        </div>
         
       </div>
       <div
@@ -175,10 +202,13 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
         <div
           class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
           style="width: 100%;"
-        />
+        >
+          <!---->
+        </div>
         
       </div>
       
+      
     </div>
   </div>
   <div
@@ -190,6 +220,7 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
       data-v-b5595f68=""
     >
       
+      
       <div
         class="t-skeleton__row"
       >
@@ -197,16 +228,20 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
         <div
           class="t-skeleton__col t-skeleton--type-rect t-skeleton--animation-none"
           style="width: 48px; height: 48px;"
-        />
+        >
+          <!---->
+        </div>
         
       </div>
       
+      
     </div>
     <div
       class="t-skeleton group-content"
       data-v-b5595f68=""
     >
       
+      
       <div
         class="t-skeleton__row"
       >
@@ -214,7 +249,9 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
         <div
           class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
           style="width: 50%;"
-        />
+        >
+          <!---->
+        </div>
         
       </div>
       <div
@@ -224,10 +261,13 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
         <div
           class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
           style="width: 100%;"
-        />
+        >
+          <!---->
+        </div>
         
       </div>
       
+      
     </div>
   </div>
   
@@ -239,6 +279,7 @@ exports[`Skeleton > Skeleton gridVue demo works fine 1`] = `
   class="t-skeleton"
 >
   
+  
   <div
     class="t-skeleton__row"
   >
@@ -246,23 +287,33 @@ exports[`Skeleton > Skeleton gridVue demo works fine 1`] = `
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 48px; border-radius: 6px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 48px; border-radius: 6px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 48px; border-radius: 6px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 48px; border-radius: 6px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 48px; border-radius: 6px;"
-    />
+    >
+      <!---->
+    </div>
     
   </div>
   <div
@@ -272,26 +323,37 @@ exports[`Skeleton > Skeleton gridVue demo works fine 1`] = `
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 16px; border-radius: 3px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 16px; border-radius: 3px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 16px; border-radius: 3px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 16px; border-radius: 3px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 16px; border-radius: 3px;"
-    />
+    >
+      <!---->
+    </div>
     
   </div>
   
+  
 </div>
 `;
 
@@ -305,6 +367,7 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
     data-v-ac6b2376=""
   >
     
+    
     <div
       class="t-skeleton__row"
     >
@@ -312,7 +375,9 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
       <div
         class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
         style="width: 163.5px; height: 163.5px; border-radius: 12px;"
-      />
+      >
+        <!---->
+      </div>
       
     </div>
     <div
@@ -321,7 +386,9 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
       
       <div
         class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-      />
+      >
+        <!---->
+      </div>
       
     </div>
     <div
@@ -331,16 +398,20 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
       <div
         class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
         style="width: 61%;"
-      />
+      >
+        <!---->
+      </div>
       
     </div>
     
+    
   </div>
   <div
     class="t-skeleton"
     data-v-ac6b2376=""
   >
     
+    
     <div
       class="t-skeleton__row"
     >
@@ -348,7 +419,9 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
       <div
         class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
         style="width: 163.5px; height: 163.5px; border-radius: 12px;"
-      />
+      >
+        <!---->
+      </div>
       
     </div>
     <div
@@ -357,7 +430,9 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
       
       <div
         class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-      />
+      >
+        <!---->
+      </div>
       
     </div>
     <div
@@ -367,10 +442,13 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
       <div
         class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
         style="width: 61%;"
-      />
+      >
+        <!---->
+      </div>
       
     </div>
     
+    
   </div>
 </div>
 `;
@@ -429,6 +507,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             data-v-7e69da81=""
           >
             
+            
             <div
               class="t-skeleton__row"
             >
@@ -436,10 +515,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               <div
                 class="t-skeleton__col t-skeleton--type-circle t-skeleton--animation-none"
                 style="width: 48px; height: 48px;"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             
+            
           </div>
         </div>
       </div>
@@ -461,6 +543,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             data-v-7e69da81=""
           >
             
+            
             <div
               class="t-skeleton__row"
             >
@@ -468,10 +551,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               <div
                 class="t-skeleton__col t-skeleton--type-rect t-skeleton--animation-none"
                 style="width: 72px; height: 72px;"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             
+            
           </div>
         </div>
       </div>
@@ -493,6 +579,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             data-v-7e69da81=""
           >
             
+            
             <div
               class="t-skeleton__row"
             >
@@ -500,11 +587,15 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                 style="width: 24%; height: 16px; margin-right: 16px;"
-              />
+              >
+                <!---->
+              </div>
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                 style="width: 76%; height: 16px;"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -513,10 +604,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             
+            
           </div>
         </div>
       </div>
@@ -538,13 +632,16 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             data-v-7e69da81=""
           >
             
+            
             <div
               class="t-skeleton__row"
             >
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -553,7 +650,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -562,7 +661,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -572,10 +673,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                 style="width: 55%;"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             
+            
           </div>
         </div>
       </div>
@@ -611,6 +715,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
           data-v-b5595f68=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -618,16 +723,20 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-circle t-skeleton--animation-none"
               style="width: 48px; height: 48px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton group-content"
           data-v-b5595f68=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -635,7 +744,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 50%;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -645,10 +756,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100%;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
       </div>
       <div
@@ -660,6 +774,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
           data-v-b5595f68=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -667,16 +782,20 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-rect t-skeleton--animation-none"
               style="width: 48px; height: 48px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton group-content"
           data-v-b5595f68=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -684,7 +803,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 50%;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -694,10 +815,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100%;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
       </div>
       
@@ -727,6 +851,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
         data-v-9b6b90cc=""
       >
         
+        
         <div
           class="t-skeleton__row"
         >
@@ -734,23 +859,33 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 48px; border-radius: 6px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 48px; border-radius: 6px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 48px; border-radius: 6px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 48px; border-radius: 6px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 48px; border-radius: 6px;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -760,26 +895,37 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 16px; border-radius: 3px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 16px; border-radius: 3px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 16px; border-radius: 3px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 16px; border-radius: 3px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 16px; border-radius: 3px;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         
+        
       </div>
       
     </div>
@@ -812,6 +958,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
           data-v-ac6b2376=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -819,7 +966,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 163.5px; height: 163.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -828,7 +977,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -838,16 +989,20 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 61%;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton"
           data-v-ac6b2376=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -855,7 +1010,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 163.5px; height: 163.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -864,7 +1021,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -874,10 +1033,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 61%;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
       </div>
       
@@ -920,13 +1082,16 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             data-v-5431dabc=""
           >
             
+            
             <div
               class="t-skeleton__row"
             >
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -935,7 +1100,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -944,7 +1111,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -954,10 +1123,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
                 style="width: 55%;"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             
+            
           </div>
         </div>
       </div>
@@ -979,13 +1151,16 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             data-v-5431dabc=""
           >
             
+            
             <div
               class="t-skeleton__row"
             >
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -994,7 +1169,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -1003,7 +1180,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -1013,10 +1192,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
                 style="width: 55%;"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             
+            
           </div>
         </div>
       </div>
@@ -1050,6 +1232,7 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
         data-v-7e69da81=""
       >
         
+        
         <div
           class="t-skeleton__row"
         >
@@ -1057,10 +1240,13 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-circle t-skeleton--animation-none"
             style="width: 48px; height: 48px;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         
+        
       </div>
     </div>
   </div>
@@ -1082,6 +1268,7 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
         data-v-7e69da81=""
       >
         
+        
         <div
           class="t-skeleton__row"
         >
@@ -1089,10 +1276,13 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-rect t-skeleton--animation-none"
             style="width: 72px; height: 72px;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         
+        
       </div>
     </div>
   </div>
@@ -1114,6 +1304,7 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
         data-v-7e69da81=""
       >
         
+        
         <div
           class="t-skeleton__row"
         >
@@ -1121,11 +1312,15 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 24%; height: 16px; margin-right: 16px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 76%; height: 16px;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -1134,10 +1329,13 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         
+        
       </div>
     </div>
   </div>
@@ -1159,13 +1357,16 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
         data-v-7e69da81=""
       >
         
+        
         <div
           class="t-skeleton__row"
         >
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -1174,7 +1375,9 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -1183,7 +1386,9 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -1193,10 +1398,13 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 55%;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         
+        
       </div>
     </div>
   </div>
diff --git a/src/skeleton/__test__/index.test.jsx b/src/skeleton/__test__/index.test.jsx
index 5ede75d3..2c072911 100644
--- a/src/skeleton/__test__/index.test.jsx
+++ b/src/skeleton/__test__/index.test.jsx
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
-import Skeleton from '../skeleton.vue';
+import Skeleton from '../skeleton';
 
 const prefix = 't';
 const name = `${prefix}-skeleton`;
diff --git a/src/tag/__test__/__snapshots__/demo.test.jsx.snap b/src/tag/__test__/__snapshots__/demo.test.jsx.snap
index 62a3028a..c4198715 100644
--- a/src/tag/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/tag/__test__/__snapshots__/demo.test.jsx.snap
@@ -25,36 +25,26 @@ exports[`Tag > Tag checkableVue demo works fine 1`] = `
           class="t-tag t-tag--checkable t-tag--square t-tag--default t-tag--large t-tag--light"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
-            
             未选中态
-            
           </span>
+          <!---->
         </span>
         <span
           aria-disabled="false"
-          class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--light t-is-checked t-tag--checked"
+          class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--light t-tag--checked"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
-            
             已选中态
-            
           </span>
+          <!---->
         </span>
       </div>
       <div
@@ -70,36 +60,26 @@ exports[`Tag > Tag checkableVue demo works fine 1`] = `
           class="t-tag t-tag--checkable t-tag--square t-tag--default t-tag--large t-tag--dark"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
-            
             未选中态
-            
           </span>
+          <!---->
         </span>
         <span
           aria-disabled="false"
-          class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--dark t-is-checked t-tag--checked"
+          class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--dark t-tag--checked"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
-            
             已选中态
-            
           </span>
+          <!---->
         </span>
       </div>
       <div
@@ -115,36 +95,26 @@ exports[`Tag > Tag checkableVue demo works fine 1`] = `
           class="t-tag t-tag--checkable t-tag--square t-tag--default t-tag--large t-tag--outline"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
-            
             未选中态
-            
           </span>
+          <!---->
         </span>
         <span
           aria-disabled="false"
-          class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--outline t-is-checked t-tag--checked"
+          class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--outline t-tag--checked"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
-            
             已选中态
-            
           </span>
+          <!---->
         </span>
       </div>
       <div
@@ -160,36 +130,26 @@ exports[`Tag > Tag checkableVue demo works fine 1`] = `
           class="t-tag t-tag--checkable t-tag--square t-tag--default t-tag--large t-tag--light-outline"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
-            
             未选中态
-            
           </span>
+          <!---->
         </span>
         <span
           aria-disabled="false"
-          class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--light-outline t-is-checked t-tag--checked"
+          class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--light-outline t-tag--checked"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
-            
             已选中态
-            
           </span>
+          <!---->
         </span>
       </div>
       
@@ -210,14 +170,10 @@ exports[`Tag > Tag closableVue demo works fine 1`] = `
   >
     <span
       aria-disabled="false"
-      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable"
+      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-tag--closable"
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -244,14 +200,10 @@ exports[`Tag > Tag closableVue demo works fine 1`] = `
     </span>
     <span
       aria-disabled="false"
-      class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium t-is-closable t-tag--closable"
+      class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium t-tag--closable"
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -325,11 +277,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
             class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
             role="button"
           >
-            <span
-              class="t-tag__icon"
-            >
-              <!---->
-            </span>
+            <!---->
             <span
               class="t-tag__text"
             >
@@ -344,11 +292,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
             class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium"
             role="button"
           >
-            <span
-              class="t-tag__icon"
-            >
-              <!---->
-            </span>
+            <!---->
             <span
               class="t-tag__text"
             >
@@ -372,11 +316,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
             class="t-tag t-tag--default t-tag--round t-tag--light t-tag--medium"
             role="button"
           >
-            <span
-              class="t-tag__icon"
-            >
-              <!---->
-            </span>
+            <!---->
             <span
               class="t-tag__text"
             >
@@ -391,11 +331,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
             class="t-tag t-tag--default t-tag--round t-tag--outline t-tag--medium"
             role="button"
           >
-            <span
-              class="t-tag__icon"
-            >
-              <!---->
-            </span>
+            <!---->
             <span
               class="t-tag__text"
             >
@@ -410,11 +346,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
             class="t-tag t-tag--default t-tag--mark t-tag--outline t-tag--medium"
             role="button"
           >
-            <span
-              class="t-tag__icon"
-            >
-              <!---->
-            </span>
+            <!---->
             <span
               class="t-tag__text"
             >
@@ -502,11 +434,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
             role="button"
             style="max-width: 130px;"
           >
-            <span
-              class="t-tag__icon"
-            >
-              <!---->
-            </span>
+            <!---->
             <span
               class="t-tag__text"
             >
@@ -529,14 +457,10 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
         >
           <span
             aria-disabled="false"
-            class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable"
+            class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-tag--closable"
             role="button"
           >
-            <span
-              class="t-tag__icon"
-            >
-              <!---->
-            </span>
+            <!---->
             <span
               class="t-tag__text"
             >
@@ -563,14 +487,10 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
           </span>
           <span
             aria-disabled="false"
-            class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium t-is-closable t-tag--closable"
+            class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium t-tag--closable"
             role="button"
           >
-            <span
-              class="t-tag__icon"
-            >
-              <!---->
-            </span>
+            <!---->
             <span
               class="t-tag__text"
             >
@@ -621,36 +541,26 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--checkable t-tag--square t-tag--default t-tag--large t-tag--light"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
-                  
                   未选中态
-                  
                 </span>
+                <!---->
               </span>
               <span
                 aria-disabled="false"
-                class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--light t-is-checked t-tag--checked"
+                class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--light t-tag--checked"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
-                  
                   已选中态
-                  
                 </span>
+                <!---->
               </span>
             </div>
             <div
@@ -666,36 +576,26 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--checkable t-tag--square t-tag--default t-tag--large t-tag--dark"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
-                  
                   未选中态
-                  
                 </span>
+                <!---->
               </span>
               <span
                 aria-disabled="false"
-                class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--dark t-is-checked t-tag--checked"
+                class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--dark t-tag--checked"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
-                  
                   已选中态
-                  
                 </span>
+                <!---->
               </span>
             </div>
             <div
@@ -711,36 +611,26 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--checkable t-tag--square t-tag--default t-tag--large t-tag--outline"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
-                  
                   未选中态
-                  
                 </span>
+                <!---->
               </span>
               <span
                 aria-disabled="false"
-                class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--outline t-is-checked t-tag--checked"
+                class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--outline t-tag--checked"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
-                  
                   已选中态
-                  
                 </span>
+                <!---->
               </span>
             </div>
             <div
@@ -756,36 +646,26 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--checkable t-tag--square t-tag--default t-tag--large t-tag--light-outline"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
-                  
                   未选中态
-                  
                 </span>
+                <!---->
               </span>
               <span
                 aria-disabled="false"
-                class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--light-outline t-is-checked t-tag--checked"
+                class="t-tag t-tag--checkable t-tag--square t-tag--primary t-tag--large t-tag--light-outline t-tag--checked"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
-                  
                   已选中态
-                  
                 </span>
+                <!---->
               </span>
             </div>
             
@@ -830,11 +710,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -849,11 +725,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--primary t-tag--square t-tag--light t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -868,11 +740,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--warning t-tag--square t-tag--light t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -887,11 +755,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--danger t-tag--square t-tag--light t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -906,11 +770,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--success t-tag--square t-tag--light t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -929,11 +789,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--default t-tag--square t-tag--dark t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -948,11 +804,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -967,11 +819,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--warning t-tag--square t-tag--dark t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -986,11 +834,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--danger t-tag--square t-tag--dark t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -1005,11 +849,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--success t-tag--square t-tag--dark t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -1028,11 +868,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -1047,11 +883,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--primary t-tag--square t-tag--outline t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -1066,11 +898,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--warning t-tag--square t-tag--outline t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -1085,11 +913,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--danger t-tag--square t-tag--outline t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -1104,11 +928,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--success t-tag--square t-tag--outline t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -1127,11 +947,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--default t-tag--square t-tag--light-outline t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -1146,11 +962,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--primary t-tag--square t-tag--light-outline t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -1165,11 +977,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--warning t-tag--square t-tag--light-outline t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -1184,11 +992,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--danger t-tag--square t-tag--light-outline t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -1203,11 +1007,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
                 class="t-tag t-tag--success t-tag--square t-tag--light-outline t-tag--medium"
                 role="button"
               >
-                <span
-                  class="t-tag__icon"
-                >
-                  <!---->
-                </span>
+                <!---->
                 <span
                   class="t-tag__text"
                 >
@@ -1258,11 +1058,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
               data-v-aac3f224=""
               role="button"
             >
-              <span
-                class="t-tag__icon"
-              >
-                <!---->
-              </span>
+              <!---->
               <span
                 class="t-tag__text"
               >
@@ -1278,11 +1074,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
               data-v-aac3f224=""
               role="button"
             >
-              <span
-                class="t-tag__icon"
-              >
-                <!---->
-              </span>
+              <!---->
               <span
                 class="t-tag__text"
               >
@@ -1298,11 +1090,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
               data-v-aac3f224=""
               role="button"
             >
-              <span
-                class="t-tag__icon"
-              >
-                <!---->
-              </span>
+              <!---->
               <span
                 class="t-tag__text"
               >
@@ -1318,11 +1106,7 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
               data-v-aac3f224=""
               role="button"
             >
-              <span
-                class="t-tag__icon"
-              >
-                <!---->
-              </span>
+              <!---->
               <span
                 class="t-tag__text"
               >
@@ -1339,15 +1123,11 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
           >
             <span
               aria-disabled="false"
-              class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large t-is-closable t-tag--closable"
+              class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large t-tag--closable"
               data-v-aac3f224=""
               role="button"
             >
-              <span
-                class="t-tag__icon"
-              >
-                <!---->
-              </span>
+              <!---->
               <span
                 class="t-tag__text"
               >
@@ -1374,15 +1154,11 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
             </span>
             <span
               aria-disabled="false"
-              class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large t-is-closable t-tag--closable"
+              class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large t-tag--closable"
               data-v-aac3f224=""
               role="button"
             >
-              <span
-                class="t-tag__icon"
-              >
-                <!---->
-              </span>
+              <!---->
               <span
                 class="t-tag__text"
               >
@@ -1409,15 +1185,11 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
             </span>
             <span
               aria-disabled="false"
-              class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable"
+              class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-tag--closable"
               data-v-aac3f224=""
               role="button"
             >
-              <span
-                class="t-tag__icon"
-              >
-                <!---->
-              </span>
+              <!---->
               <span
                 class="t-tag__text"
               >
@@ -1444,15 +1216,11 @@ exports[`Tag > Tag mobileVue demo works fine 1`] = `
             </span>
             <span
               aria-disabled="false"
-              class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small t-is-closable t-tag--closable"
+              class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small t-tag--closable"
               data-v-aac3f224=""
               role="button"
             >
-              <span
-                class="t-tag__icon"
-              >
-                <!---->
-              </span>
+              <!---->
               <span
                 class="t-tag__text"
               >
@@ -1501,11 +1269,7 @@ exports[`Tag > Tag sizeVue demo works fine 1`] = `
       data-v-aac3f224=""
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -1521,11 +1285,7 @@ exports[`Tag > Tag sizeVue demo works fine 1`] = `
       data-v-aac3f224=""
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -1541,11 +1301,7 @@ exports[`Tag > Tag sizeVue demo works fine 1`] = `
       data-v-aac3f224=""
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -1561,11 +1317,7 @@ exports[`Tag > Tag sizeVue demo works fine 1`] = `
       data-v-aac3f224=""
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -1582,15 +1334,11 @@ exports[`Tag > Tag sizeVue demo works fine 1`] = `
   >
     <span
       aria-disabled="false"
-      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large t-is-closable t-tag--closable"
+      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large t-tag--closable"
       data-v-aac3f224=""
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -1617,15 +1365,11 @@ exports[`Tag > Tag sizeVue demo works fine 1`] = `
     </span>
     <span
       aria-disabled="false"
-      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large t-is-closable t-tag--closable"
+      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large t-tag--closable"
       data-v-aac3f224=""
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -1652,15 +1396,11 @@ exports[`Tag > Tag sizeVue demo works fine 1`] = `
     </span>
     <span
       aria-disabled="false"
-      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable"
+      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-tag--closable"
       data-v-aac3f224=""
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -1687,15 +1427,11 @@ exports[`Tag > Tag sizeVue demo works fine 1`] = `
     </span>
     <span
       aria-disabled="false"
-      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small t-is-closable t-tag--closable"
+      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small t-tag--closable"
       data-v-aac3f224=""
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -1743,11 +1479,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -1762,11 +1494,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--primary t-tag--square t-tag--light t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -1781,11 +1509,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--warning t-tag--square t-tag--light t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -1800,11 +1524,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--danger t-tag--square t-tag--light t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -1819,11 +1539,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--success t-tag--square t-tag--light t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -1842,11 +1558,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--default t-tag--square t-tag--dark t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -1861,11 +1573,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -1880,11 +1588,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--warning t-tag--square t-tag--dark t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -1899,11 +1603,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--danger t-tag--square t-tag--dark t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -1918,11 +1618,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--success t-tag--square t-tag--dark t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -1941,11 +1637,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -1960,11 +1652,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--primary t-tag--square t-tag--outline t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -1979,11 +1667,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--warning t-tag--square t-tag--outline t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -1998,11 +1682,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--danger t-tag--square t-tag--outline t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -2017,11 +1697,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--success t-tag--square t-tag--outline t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -2040,11 +1716,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--default t-tag--square t-tag--light-outline t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -2059,11 +1731,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--primary t-tag--square t-tag--light-outline t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -2078,11 +1746,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--warning t-tag--square t-tag--light-outline t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -2097,11 +1761,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--danger t-tag--square t-tag--light-outline t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -2116,11 +1776,7 @@ exports[`Tag > Tag themeVue demo works fine 1`] = `
           class="t-tag t-tag--success t-tag--square t-tag--light-outline t-tag--medium"
           role="button"
         >
-          <span
-            class="t-tag__icon"
-          >
-            <!---->
-          </span>
+          <!---->
           <span
             class="t-tag__text"
           >
@@ -2151,11 +1807,7 @@ exports[`Tag > Tag typeVue demo works fine 1`] = `
       class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -2170,11 +1822,7 @@ exports[`Tag > Tag typeVue demo works fine 1`] = `
       class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium"
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -2198,11 +1846,7 @@ exports[`Tag > Tag typeVue demo works fine 1`] = `
       class="t-tag t-tag--default t-tag--round t-tag--light t-tag--medium"
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -2217,11 +1861,7 @@ exports[`Tag > Tag typeVue demo works fine 1`] = `
       class="t-tag t-tag--default t-tag--round t-tag--outline t-tag--medium"
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -2236,11 +1876,7 @@ exports[`Tag > Tag typeVue demo works fine 1`] = `
       class="t-tag t-tag--default t-tag--mark t-tag--outline t-tag--medium"
       role="button"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
@@ -2328,11 +1964,7 @@ exports[`Tag > Tag typeVue demo works fine 1`] = `
       role="button"
       style="max-width: 130px;"
     >
-      <span
-        class="t-tag__icon"
-      >
-        <!---->
-      </span>
+      <!---->
       <span
         class="t-tag__text"
       >
diff --git a/src/tag/__test__/index.test.jsx b/src/tag/__test__/index.test.jsx
index 73d42279..13351e6e 100644
--- a/src/tag/__test__/index.test.jsx
+++ b/src/tag/__test__/index.test.jsx
@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import { AppIcon as TIconApp } from 'tdesign-icons-vue-next';
 import Tag from '../tag.tsx';
-import TCheckTag from '../check-tag.vue';
+import TCheckTag from '../check-tag';
 
 const TEXT = 'tdesign-mobile-vue';
 const iconFunc = () => h(TIconApp);
@@ -71,7 +71,7 @@ describe('Tag.vue', async () => {
 
   it('disabled render', async () => {
     const wrapper = mount(() => <Tag disabled>{TEXT}</Tag>);
-    expect(wrapper.classes()).toContain('t-is-disabled');
+    expect(wrapper.classes()).toContain('t-tag--disabled');
   });
 
   it('maxWidth render', async () => {
@@ -121,7 +121,7 @@ describe('CheckTag render', async () => {
 
   it('disabled render', async () => {
     const wrapper = mount(() => <TCheckTag disabled>{TEXT}</TCheckTag>);
-    expect(wrapper.classes()).toContain('t-is-disabled');
+    expect(wrapper.classes()).toContain('t-tag--disabled');
   });
 
   it('icon render', async () => {
@@ -180,4 +180,15 @@ describe('CheckTag render', async () => {
     await wrapper.trigger('click');
     expect(wrapper.vm.checked).toBe(false);
   });
+  it('close render', async () => {
+    const onClose = vi.fn();
+    const wrapper = mount(() => <TCheckTag closable onClose={onClose}>{TEXT}</TCheckTag>);
+    const com = wrapper.findComponent(TCheckTag);
+    expect(wrapper.classes()).toContain('t-tag--closable');
+    const closeBtn = com.find('.t-tag__icon-close');
+    expect(closeBtn.exists()).toBeTruthy();
+
+    await closeBtn.trigger('click');
+    expect(onClose).toBeCalledWith({ e: expect.any(MouseEvent)});
+  });
 });