Repository: Tencent/tdesign-mobile-vue
Pull request #1010 (2023-08-04 09:17:19)

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


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

**Total Size:** 388 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 205 kB | +41 B (0%) |
| `./dist/tdesign.min.js` | 118 kB | +35 B (0%) |

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

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

</details>


github-actions[bot]: <a href="https://preview-pr1010-tdesign-mobile-vue.surge.sh"><img height="96" alt="完成" src="https://user-images.githubusercontent.com/15634204/150816437-9f5bb788-cd67-4cbc-9897-b82d74e9aa65.png" /></a>
<!-- [工作流地址](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/5760637196) -->
<!-- AUTO_PREVIEW_HOOK -->

Patch:
diff --git a/src/cell/cell-group-props.ts b/src/cell/cell-group-props.ts
index d20c1a8b..dbad6f27 100644
--- a/src/cell/cell-group-props.ts
+++ b/src/cell/cell-group-props.ts
@@ -9,7 +9,10 @@ import { PropType } from 'vue';
 
 export default {
   /** 是否显示组边框 */
-  bordered: Boolean,
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
   /** 单元格组风格 */
   theme: {
     type: String as PropType<TdCellGroupProps['theme']>,
diff --git a/src/cell/cell-group.vue b/src/cell/cell-group.vue
index 81064b88..42676a9f 100644
--- a/src/cell/cell-group.vue
+++ b/src/cell/cell-group.vue
@@ -1,15 +1,15 @@
 <template>
-  <div :class="rootClass">
-    <div v-if="title" :class="`${name}__title`">
-      <slot name="title">{{ title }}</slot>
-    </div>
-
+  <div v-if="titleContent" :class="`${name}__title`">
+    <t-node :content="titleContent" />
+  </div>
+  <div :class="contentClass">
     <slot />
   </div>
 </template>
 
 <script lang="ts">
-import { defineProps, computed } from 'vue';
+import { defineProps, computed, getCurrentInstance } from 'vue';
+import { renderTNode, TNode } from '../shared';
 import CellGroupProps from './cell-group-props';
 import config from '../config';
 
@@ -18,10 +18,13 @@ const name = `${prefix}-cell-group`;
 
 export default {
   name,
+  components: { TNode },
 };
 </script>
 
 <script lang="ts" setup>
 const props = defineProps(CellGroupProps);
-const rootClass = computed(() => [name, `${name}--${props.theme}`]);
+const internalInstance = getCurrentInstance();
+const titleContent = computed(() => renderTNode(internalInstance, 'title'));
+const contentClass = computed(() => [name, `${name}--${props.theme}`, { [`${name}--bordered`]: props.bordered }]);
 </script>
diff --git a/src/cell/cell.en-US.md b/src/cell/cell.en-US.md
index ef91b8aa..0ebf9d75 100644
--- a/src/cell/cell.en-US.md
+++ b/src/cell/cell.en-US.md
@@ -28,7 +28,7 @@ click | `(context: { e: MouseEvent })` | Typescript：`string \| TNode`。[see m
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-bordered | Boolean | - | \- | N
+bordered | Boolean | false | \- | N
 theme | String | default | `0.15.0`。options：default/card | N
 title | String | - | \- | N
 
diff --git a/src/cell/cell.md b/src/cell/cell.md
index abaaaeb8..5ab678ec 100644
--- a/src/cell/cell.md
+++ b/src/cell/cell.md
@@ -28,7 +28,7 @@ click | `(context: { e: MouseEvent })` | 右侧内容。TS 类型：`string \| T
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-bordered | Boolean | - | 是否显示组边框 | N
+bordered | Boolean | false | 是否显示组边框 | N
 theme | String | default | `0.15.0`。单元格组风格。可选项：default/card | N
 title | String | - | 单元格组标题 | N
 
diff --git a/src/cell/type.ts b/src/cell/type.ts
index 4e4edf1a..334a6046 100644
--- a/src/cell/type.ts
+++ b/src/cell/type.ts
@@ -64,6 +64,7 @@ export interface TdCellProps {
 export interface TdCellGroupProps {
   /**
    * 是否显示组边框
+   * @default false
    */
   bordered?: boolean;
   /**
diff --git a/src/collapse/collapse-panel-props.ts b/src/collapse/collapse-panel-props.ts
index 76c4ccda..dff02252 100644
--- a/src/collapse/collapse-panel-props.ts
+++ b/src/collapse/collapse-panel-props.ts
@@ -32,6 +32,10 @@ export default {
   header: {
     type: [String, Function] as PropType<TdCollapsePanelProps['header']>,
   },
+  /** 面板头左侧图标 */
+  headerLeftIcon: {
+    type: [String, Function] as PropType<TdCollapsePanelProps['headerLeftIcon']>,
+  },
   /** 面板头的右侧区域，一般用于呈现面板操作 */
   headerRightContent: {
     type: [String, Function] as PropType<TdCollapsePanelProps['headerRightContent']>,
diff --git a/src/collapse/collapse-panel.vue b/src/collapse/collapse-panel.vue
index b69e34b7..68bf8d35 100644
--- a/src/collapse/collapse-panel.vue
+++ b/src/collapse/collapse-panel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapRef" :class="rootClass">
+  <div ref="wrapRef" :class="rootClass" :style="{ height: wrapperHeight }">
     <div ref="headRef" :class="`${name}__title`" @click="handleClick">
       <t-cell
         :class="[`${name}__header`, `${name}__header--${placement}`, { [`${name}__header--expanded`]: isActive }]"
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, nextTick, watch, onMounted, inject, defineComponent, getCurrentInstance, h } from 'vue';
+import { ref, computed, nextTick, watch, onMounted, inject, defineComponent, getCurrentInstance } from 'vue';
 import { ChevronDownIcon, ChevronUpIcon } from 'tdesign-icons-vue-next';
 import isFunction from 'lodash/isFunction';
 import TCell from '../cell';
@@ -91,18 +91,19 @@ export default defineComponent({
     const bodyRef = ref();
     const wrapRef = ref();
     const headRef = ref();
+    const wrapperHeight = ref('');
     const updatePanelState = () => {
       if (!wrapRef.value) {
         return;
       }
       const { height: headHeight } = headRef.value.getBoundingClientRect();
       if (!isActive.value) {
-        wrapRef.value.style.height = `${headHeight}px`;
+        wrapperHeight.value = `${headHeight}px`;
         return;
       }
       const { height: bodyHeight } = bodyRef.value.getBoundingClientRect();
       const height = headHeight + bodyHeight;
-      wrapRef.value.style.height = `${height}px`;
+      wrapperHeight.value = `${height}px`;
     };
 
     watch(isActive, () => {
@@ -131,6 +132,7 @@ export default defineComponent({
       panelContent,
       headerContent,
       noteContent,
+      wrapperHeight,
     };
   },
 });
diff --git a/src/collapse/collapse.en-US.md b/src/collapse/collapse.en-US.md
index 754e6890..e5781622 100644
--- a/src/collapse/collapse.en-US.md
+++ b/src/collapse/collapse.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Collapse Props
 
 name | type | default | description | required
@@ -10,7 +9,7 @@ defaultExpandAll | Boolean | false | \- | N
 disabled | Boolean | - | \- | N
 expandIcon | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 expandMutex | Boolean | false | \- | N
-theme | String | default | options：default/card | N
+theme | String | default | options: default/card | N
 value | Array | [] | `v-model` and `v-model:value` is supported。Typescript：`CollapseValue` `type CollapseValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/collapse/type.ts) | N
 defaultValue | Array | [] | uncontrolled property。Typescript：`CollapseValue` `type CollapseValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/collapse/type.ts) | N
 onChange | Function |  | Typescript：`(value: CollapseValue, context: { e: MouseEvent }) => void`<br/> | N
@@ -31,8 +30,9 @@ destroyOnCollapse | Boolean | false | \- | N
 disabled | Boolean | undefined | \- | N
 expandIcon | Boolean / Slot / Function | undefined | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 header | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+headerLeftIcon | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 headerRightContent | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-placement | String | bottom | options：bottom/top | N
+placement | String | bottom | options: bottom/top | N
 value | String / Number | - | \- | N
 
 
diff --git a/src/collapse/collapse.md b/src/collapse/collapse.md
index 6247a4b2..9dc75bd0 100644
--- a/src/collapse/collapse.md
+++ b/src/collapse/collapse.md
@@ -26,10 +26,11 @@ change | `(value: CollapseValue, context: { e: MouseEvent })` | 切换面板时
 -- | -- | -- | -- | --
 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
-destroyOnCollapse | Boolean | false | 当前面板处理折叠状态时，是否销毁面板内容 | N
+destroyOnCollapse | Boolean | false | 【暂不支持】当前面板处理折叠状态时，是否销毁面板内容 | N
 disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N
 expandIcon | Boolean / Slot / Function | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 header | String / Slot / Function | - | 面板头内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+headerLeftIcon | String / Slot / Function | - | 面板头左侧图标。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 headerRightContent | String / Slot / Function | - | 面板头的右侧区域，一般用于呈现面板操作。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 placement | String | bottom | 选项卡内容的位置。可选项：bottom/top | N
 value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N
diff --git a/src/collapse/type.ts b/src/collapse/type.ts
index a965ffe9..5f6d1f19 100644
--- a/src/collapse/type.ts
+++ b/src/collapse/type.ts
@@ -78,6 +78,10 @@ export interface TdCollapsePanelProps {
    * 面板头内容
    */
   header?: string | TNode;
+  /**
+   * 面板头左侧图标
+   */
+  headerLeftIcon?: string | TNode;
   /**
    * 面板头的右侧区域，一般用于呈现面板操作
    */
diff --git a/src/common.ts b/src/common.ts
index 177d1a7b..a5f102ba 100644
--- a/src/common.ts
+++ b/src/common.ts
@@ -78,7 +78,7 @@ export interface KeysType {
 }
 
 export interface HTMLElementAttributes {
-  [css: string]: string;
+  [attribute: string]: string;
 }
 
 export interface TScroll {
@@ -121,3 +121,7 @@ export interface ScrollToElementParams {
   time?: number;
   behavior?: 'auto' | 'smooth';
 }
+
+export interface ComponentScrollToElementParams extends ScrollToElementParams {
+  key: string | number;
+}
diff --git a/src/dropdown-menu/dropdown-menu.vue b/src/dropdown-menu/dropdown-menu.vue
index 067599b1..f674d087 100644
--- a/src/dropdown-menu/dropdown-menu.vue
+++ b/src/dropdown-menu/dropdown-menu.vue
@@ -65,15 +65,23 @@ export default defineComponent({
 
     // 通过 slots.default 子成员，计算标题栏选项
     const menuTitles = computed(() =>
-      menuItems.value.map((item: any) => {
+      menuItems.value.map((item: any, index: number) => {
         const { keys, label, value, disabled, options } = item.props;
         const target = options?.find((item: any) => item[keys?.value ?? 'value'] === value);
-        if (!label) {
-          state.itemsLabel.push((target && target[keys?.label ?? 'label']) || '');
+        if (state.itemsLabel.length < index + 1) {
+          if (!label) {
+            state.itemsLabel.push((target && target[keys?.label ?? 'label']) || '');
+          } else {
+            state.itemsLabel.push(label || '');
+          }
+          const computedLabel = target?.[keys?.label ?? 'label'] || '';
+          return {
+            label: label || computedLabel,
+            disabled: disabled !== undefined && disabled !== false,
+          };
         }
-        const computedLabel = target?.[keys?.label ?? 'label'] || '';
         return {
-          label: label || computedLabel,
+          label: menuTitles.value[index].label,
           disabled: disabled !== undefined && disabled !== false,
         };
       }),
@@ -125,11 +133,9 @@ export default defineComponent({
       menuContext.recordMenuExpanded(container, control, DropdownMenuExpandState.expanded);
     };
     const collapseMenu = () => {
-      if (state.itemsLabel.length > 0) {
-        menuTitles.value.forEach((item: any, index: number) => {
-          item.label = state.itemsLabel[index];
-        });
-      }
+      menuTitles.value.forEach((item: any, index: number) => {
+        item.label = state.itemsLabel[index];
+      });
       state.activeId = null;
 
       // 清除已展开状态记录
diff --git a/src/message/index.ts b/src/message/index.ts
index 498684cb..2187fa7c 100644
--- a/src/message/index.ts
+++ b/src/message/index.ts
@@ -33,6 +33,7 @@ function create(props: MessageActionOptionsType): void {
         ...otherOptions,
         visible: visible.value,
         onDurationEnd: () => {
+          otherOptions.onDurationEnd?.();
           visible.value = false;
           destroy(context, root);
         },
diff --git a/src/radio/radio.en-US.md b/src/radio/radio.en-US.md
index 7bad980c..d3da3acc 100644
--- a/src/radio/radio.en-US.md
+++ b/src/radio/radio.en-US.md
@@ -14,7 +14,7 @@ content | String / Slot / Function | - | Typescript：`string \| TNode`。[see m
 contentDisabled | Boolean | - | \- | 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
 disabled | Boolean | undefined | \- | N
-icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'dot' \| Array<TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'dot' \| 'none' \|Array<TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 maxContentRow | Number | 5 | \- | N
 maxLabelRow | Number | 3 | \- | N
diff --git a/src/radio/radio.md b/src/radio/radio.md
index 1098dc5c..2b47b32f 100644
--- a/src/radio/radio.md
+++ b/src/radio/radio.md
@@ -14,7 +14,7 @@ content | String / Slot / Function | - | 单选内容。TS 类型：`string \| T
 contentDisabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
 default | String / Slot / Function | - | 单选按钮内容，同 label。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | undefined | 是否为禁用态。如果存在父组件 RadioGroup，默认值由 RadioGroup.disabled 控制。Radio.disabled 优先级高于 RadioGroup.disabled | N
-icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标。TS 类型：`'circle' \| 'line' \| 'dot' \| Array<TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标、值为 'none' 则表示没有图标。TS 类型：`'circle' \| 'line' \| 'dot' \| 'none' \|Array<TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 label | String / Slot / Function | - | 主文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 maxContentRow | Number | 5 | 内容最大行数限制 | N
 maxLabelRow | Number | 3 | 主文案最大行数限制 | N
diff --git a/src/radio/type.ts b/src/radio/type.ts
index 7d1dbb16..657abb47 100644
--- a/src/radio/type.ts
+++ b/src/radio/type.ts
@@ -56,7 +56,7 @@ export interface TdRadioProps {
    * 自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标
    * @default 'circle'
    */
-  icon?: 'circle' | 'line' | 'dot' | Array<TNode>;
+  icon?: 'circle' | 'line' | 'dot' | 'none' | Array<TNode>;
   /**
    * 主文案
    */
diff --git a/src/rate/rate.en-US.md b/src/rate/rate.en-US.md
index ed6e3d2b..d19cabb8 100644
--- a/src/rate/rate.en-US.md
+++ b/src/rate/rate.en-US.md
@@ -16,7 +16,6 @@ size | String | 24px | \- | N
 texts | Array | [] | Typescript：`Array<string>` | N
 value | Number | 0 | `v-model` and `v-model:value` is supported | N
 defaultValue | Number | 0 | uncontrolled property | N
-variant | String | outline | options：outline/filled | N
 onChange | Function |  | Typescript：`(value: number) => void`<br/> | N
 
 ### Rate Events
diff --git a/src/rate/rate.md b/src/rate/rate.md
index 9c0ddfc9..febf96c9 100644
--- a/src/rate/rate.md
+++ b/src/rate/rate.md
@@ -16,7 +16,6 @@ size | String | 24px | 评分图标的大小 | N
 texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>` | N
 value | Number | 0 | 选择评分的值。支持语法糖 `v-model` 或 `v-model:value` | N
 defaultValue | Number | 0 | 选择评分的值。非受控属性 | N
-variant | String | outline | 已废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N
 onChange | Function |  | TS 类型：`(value: number) => void`<br/>评分数改变时触发 | N
 
 ### Rate Events
diff --git a/src/rate/rate.vue b/src/rate/rate.vue
index f66d48db..a8577863 100644
--- a/src/rate/rate.vue
+++ b/src/rate/rate.vue
@@ -77,7 +77,7 @@
 
 <script lang="ts">
 import { ref, computed, defineComponent, h } from 'vue';
-import { StarFilledIcon, StarIcon } from 'tdesign-icons-vue-next';
+import { StarFilledIcon } from 'tdesign-icons-vue-next';
 import { onClickOutside } from '@vueuse/core';
 import rateProps from './props';
 import config from '../config';
@@ -121,7 +121,7 @@ export default defineComponent({
     });
 
     const regSize = (val: string | number) => {
-      return `${val}`.indexOf('px') > 0 ? val : `${val}px`;
+      return `${val}`.includes('px') ? val : `${val}px`;
     };
     const unitConvert = (value: number | string): number => {
       if (typeof value === 'string') {
@@ -131,10 +131,11 @@ export default defineComponent({
     };
 
     const icon = (isSelect: boolean) => {
-      const { variant, icon } = props;
-      const startComponent = variant === 'filled' ? StarFilledIcon : StarIcon;
+      const { icon } = props;
+      const startComponent = StarFilledIcon;
       let select = startComponent;
       let unSelect = startComponent;
+
       if (Array.isArray(icon)) {
         const [_select, _unSelect] = icon;
         if (typeof _select === 'function') {
@@ -179,18 +180,12 @@ export default defineComponent({
 
     const classes = (n: number) => {
       const classPrefix = `${name}__icon`;
-      const className = {
+
+      return {
         [classPrefix]: true,
+        [`${classPrefix}--current`]: scaleIndex.value === Math.ceil(n),
+        [`${classPrefix}--${actualVal.value >= n ? 'selected' : 'unselected'}`]: true,
       };
-      if (scaleIndex.value === Math.ceil(n)) {
-        className[`${classPrefix}--current`] = true;
-      }
-      if (actualVal.value >= n) {
-        className[`${classPrefix}--selected`] = true;
-      } else {
-        className[`${classPrefix}--unselected`] = true;
-      }
-      return className;
     };
 
     const ratePopoverRef = ref<HTMLElement>();
diff --git a/src/slider/slider.vue b/src/slider/slider.vue
index 73fefa7a..e88aef23 100644
--- a/src/slider/slider.vue
+++ b/src/slider/slider.vue
@@ -173,13 +173,14 @@ export default defineComponent({
     const min = computed(() => Number(props.min));
     const step = computed(() => Number(props.step));
     const [innerValue, setInnerValue] = useVModel(value, modelValue, defaultValue, props.onChange);
+    const scope = computed(() => Number(props.max) - Number(props.min));
 
     watch(
       () => innerValue.value,
       (val: any) => {
         if (range.value) {
-          const left = (state.maxRange * (val[0] - min.value)) / (max.value - min.value);
-          const right = (state.maxRange * (max.value - val[1])) / (max.value - min.value);
+          const left = (state.maxRange * (val[0] - min.value)) / scope.value;
+          const right = (state.maxRange * (max.value - val[1])) / scope.value;
           // 因为要计算点相对于线的绝对定位，所以要取整条线的长度而非可滑动的范围
           setLineStyle(left, right);
         } else {
@@ -219,15 +220,15 @@ export default defineComponent({
     const lineBarWidth = ref<number>();
     const setSingleBarWidth = (value: number) => {
       const halfBlock = theme.value === 'capsule' ? Number(state.blockSize) / 2 : 0;
-      const percentage = (Number(value) - min.value) / (max.value - min.value);
+      const percentage = (Number(value) - min.value) / scope.value;
       lineBarWidth.value = percentage * state.maxRange + halfBlock;
     };
 
     onMounted(() => {
       getInitialStyle();
       if (range.value) {
-        const left = (state.maxRange * (innerValue.value?.[0] ?? 0 - min.value)) / (max.value - min.value); // @ts-ignore
-        const right = (state.maxRange * (max.value - innerValue.value[1])) / (max.value - min.value); // @ts-ignore
+        const left = (state.maxRange * (innerValue.value?.[0] ?? 0 - min.value)) / scope.value; // @ts-ignore
+        const right = (state.maxRange * (max.value - innerValue.value[1])) / scope.value; // @ts-ignore
         // 因为要计算点相对于线的绝对定位，所以要取整条线的长度而非可滑动的范围
         setLineStyle(left, right);
       } else {
@@ -284,7 +285,7 @@ export default defineComponent({
     };
 
     const calcByStep = (value: number): number => {
-      if (step.value < 1 || step.value > max.value - min.value) return value;
+      if (step.value < 1 || step.value > scope.value) return value;
       const closestStep = trimSingleValue(Math.round(value / step.value) * step.value, min.value, max.value);
 
       return closestStep as number;
@@ -301,7 +302,7 @@ export default defineComponent({
         const margin = (theme.value as any) === 'capsule' ? state.blockSize / 2 : 0;
         return arr.map((item) => ({
           val: item,
-          left: Math.round((item / 100) * state.maxRange) + margin,
+          left: Math.round(((item - min.value) / scope.value) * state.maxRange) + margin,
         }));
       };
       if (marks?.length && Array.isArray(marks)) {
@@ -321,8 +322,8 @@ export default defineComponent({
 
     const convertPosToValue = (posValue: number, isLeft = true) => {
       const raw = isLeft
-        ? (posValue / state.maxRange) * (max.value - min.value) + min.value
-        : max.value - (posValue / state.maxRange) * (max.value - min.value);
+        ? (posValue / state.maxRange) * scope.value + min.value
+        : max.value - (posValue / state.maxRange) * scope.value;
       return Math.round(raw);
     };
 


Test patch:
diff --git a/src/cell/__test__/__snapshots__/demo.test.jsx.snap b/src/cell/__test__/__snapshots__/demo.test.jsx.snap
index d4e62dc6..5dce79c4 100644
--- a/src/cell/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cell/__test__/__snapshots__/demo.test.jsx.snap
@@ -2,179 +2,185 @@
 
 exports[`Cell > Cell groupVue demo works fine 1`] = `
 <div
-  class="t-cell-group t-cell-group--card"
+  data-v-app=""
 >
-  <!--v-if-->
   
+  <!--v-if-->
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell-group t-cell-group--card"
   >
+    
     <div
-      class="t-cell__left"
+      class="t-cell t-cell--middle"
     >
       <div
-        class="t-cell__left-icon"
-      >
-        <svg
-          class="t-icon t-icon-lock-on"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__left"
+      >
+        <div
+          class="t-cell__left-icon"
         >
-          <path
-            d="M6 10v1h4v-1H6z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-          <path
-            d="M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-lock-on"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6 10v1h4v-1H6z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+            <path
+              d="M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-cell__title"
+      >
+        单行标题
+        <!--v-if-->
+        <!--v-if-->
       </div>
-      <!---->
-    </div>
-    <div
-      class="t-cell__title"
-    >
-      单行标题
-      <!--v-if-->
       <!--v-if-->
-    </div>
-    <!--v-if-->
-    <div
-      class="t-cell__right"
-    >
       <div
-        class="t-cell__right-icon"
-      >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__right"
+      >
+        <div
+          class="t-cell__right-icon"
         >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
     <div
-      class="t-cell__left"
+      class="t-cell t-cell--middle"
     >
       <div
-        class="t-cell__left-icon"
-      >
-        <svg
-          class="t-icon t-icon-service"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__left"
+      >
+        <div
+          class="t-cell__left-icon"
         >
-          <path
-            d="M2.52 6.37a5.5 5.5 0 0110.98.13v4c0 .05 0 .1-.02.15A4.5 4.5 0 019 14.7H8v-1h1a3.5 3.5 0 003.4-2.7h-1.9a.5.5 0 01-.5-.5v-4c0-.28.22-.5.5-.5h1.93a4.5 4.5 0 00-8.86 0H5.5c.28 0 .5.22.5.5v4a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5v-4c0-.04 0-.09.02-.13zM12.5 7H11v3h1.5V7zm-9 0v3H5V7H3.5z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-service"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M2.52 6.37a5.5 5.5 0 0110.98.13v4c0 .05 0 .1-.02.15A4.5 4.5 0 019 14.7H8v-1h1a3.5 3.5 0 003.4-2.7h-1.9a.5.5 0 01-.5-.5v-4c0-.28.22-.5.5-.5h1.93a4.5 4.5 0 00-8.86 0H5.5c.28 0 .5.22.5.5v4a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5v-4c0-.04 0-.09.02-.13zM12.5 7H11v3h1.5V7zm-9 0v3H5V7H3.5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-cell__title"
+      >
+        单行标题
+        <!--v-if-->
+        <!--v-if-->
       </div>
-      <!---->
-    </div>
-    <div
-      class="t-cell__title"
-    >
-      单行标题
-      <!--v-if-->
       <!--v-if-->
-    </div>
-    <!--v-if-->
-    <div
-      class="t-cell__right"
-    >
       <div
-        class="t-cell__right-icon"
-      >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__right"
+      >
+        <div
+          class="t-cell__right-icon"
         >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
     <div
-      class="t-cell__left"
+      class="t-cell t-cell--middle"
     >
       <div
-        class="t-cell__left-icon"
-      >
-        <svg
-          class="t-icon t-icon-internet"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__left"
+      >
+        <div
+          class="t-cell__left-icon"
         >
-          <path
-            d="M1.1 7.9a6.9 6.9 0 1113.8 0v.2a6.9 6.9 0 11-13.8 0v-.2zm12.79.6h-3a9.86 9.86 0 01-1.96 5.43A5.9 5.9 0 0013.9 8.5zm-3-1h3a5.9 5.9 0 00-4.96-5.43A9.86 9.86 0 0110.9 7.5zm-1 0A8.87 8.87 0 008 2.5a8.87 8.87 0 00-1.89 5H9.9zm-4.78 1h-3a5.9 5.9 0 004.96 5.43A9.86 9.86 0 015.1 8.5zm0-1c.1-1.92.75-3.82 1.96-5.43A5.9 5.9 0 002.1 7.5h3zm4.78 1H6.1c.1 1.78.73 3.53 1.89 5a8.87 8.87 0 001.89-5z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-internet"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M1.1 7.9a6.9 6.9 0 1113.8 0v.2a6.9 6.9 0 11-13.8 0v-.2zm12.79.6h-3a9.86 9.86 0 01-1.96 5.43A5.9 5.9 0 0013.9 8.5zm-3-1h3a5.9 5.9 0 00-4.96-5.43A9.86 9.86 0 0110.9 7.5zm-1 0A8.87 8.87 0 008 2.5a8.87 8.87 0 00-1.89 5H9.9zm-4.78 1h-3a5.9 5.9 0 004.96 5.43A9.86 9.86 0 015.1 8.5zm0-1c.1-1.92.75-3.82 1.96-5.43A5.9 5.9 0 002.1 7.5h3zm4.78 1H6.1c.1 1.78.73 3.53 1.89 5a8.87 8.87 0 001.89-5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-cell__title"
+      >
+        单行标题
+        <!--v-if-->
+        <!--v-if-->
       </div>
-      <!---->
-    </div>
-    <div
-      class="t-cell__title"
-    >
-      单行标题
-      <!--v-if-->
       <!--v-if-->
-    </div>
-    <!--v-if-->
-    <div
-      class="t-cell__right"
-    >
       <div
-        class="t-cell__right-icon"
-      >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__right"
+      >
+        <div
+          class="t-cell__right-icon"
         >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
+    
   </div>
   
 </div>
@@ -219,11 +225,11 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
       class="tdesign-mobile-demo-block__slot"
     >
       
+      
+      <!--v-if-->
       <div
-        class="t-cell-group t-cell-group--default"
-        data-v-f4324ab6=""
+        class="t-cell-group t-cell-group--default t-cell-group--bordered"
       >
-        <!--v-if-->
         
         <div
           class="t-cell t-cell--middle"
@@ -512,6 +518,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
         
       </div>
       
+      
     </div>
   </div>
   <div
@@ -532,11 +539,11 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
       class="tdesign-mobile-demo-block__slot"
     >
       
+      
+      <!--v-if-->
       <div
         class="t-cell-group t-cell-group--default"
-        data-v-f4324ab6=""
       >
-        <!--v-if-->
         
         <div
           class="t-cell t-cell--middle"
@@ -1038,6 +1045,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
         
       </div>
       
+      
     </div>
   </div>
   <div
@@ -1062,11 +1070,11 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
       class="tdesign-mobile-demo-block__slot"
     >
       
+      
+      <!--v-if-->
       <div
         class="t-cell-group t-cell-group--card"
-        data-v-f4324ab6=""
       >
-        <!--v-if-->
         
         <div
           class="t-cell t-cell--middle"
@@ -1241,6 +1249,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
         
       </div>
       
+      
     </div>
   </div>
 </div>
@@ -1248,506 +1257,512 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
 
 exports[`Cell > Cell multipleVue demo works fine 1`] = `
 <div
-  class="t-cell-group t-cell-group--default"
+  data-v-app=""
 >
-  <!--v-if-->
   
+  <!--v-if-->
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell-group t-cell-group--default"
   >
+    
     <div
-      class="t-cell__left"
-    >
-      <!--v-if-->
-      <!---->
-    </div>
-    <div
-      class="t-cell__title"
+      class="t-cell t-cell--middle"
     >
-      单行标题
-      <!--v-if-->
       <div
-        class="t-cell__description"
+        class="t-cell__left"
       >
-        一段很长很长的内容文字
+        <!--v-if-->
+        <!---->
       </div>
-    </div>
-    <!--v-if-->
-    <div
-      class="t-cell__right"
-    >
       <div
-        class="t-cell__right-icon"
-      >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__title"
+      >
+        单行标题
+        <!--v-if-->
+        <div
+          class="t-cell__description"
         >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          一段很长很长的内容文字
+        </div>
       </div>
-    </div>
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
-    <div
-      class="t-cell__left"
-    >
       <!--v-if-->
-      <!---->
-    </div>
-    <div
-      class="t-cell__title"
-    >
-      单行标题
-      <span
-        class="t-cell--required"
-      >
-         *
-      </span>
       <div
-        class="t-cell__description"
+        class="t-cell__right"
       >
-        一段很长很长的内容文字
+        <div
+          class="t-cell__right-icon"
+        >
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
-    <!--v-if-->
     <div
-      class="t-cell__right"
+      class="t-cell t-cell--middle"
     >
       <div
-        class="t-cell__right-icon"
-      >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__left"
+      >
+        <!--v-if-->
+        <!---->
+      </div>
+      <div
+        class="t-cell__title"
+      >
+        单行标题
+        <span
+          class="t-cell--required"
         >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+           *
+        </span>
+        <div
+          class="t-cell__description"
+        >
+          一段很长很长的内容文字
+        </div>
       </div>
-    </div>
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
-    <div
-      class="t-cell__left"
-    >
-      <!--v-if-->
-      <!---->
-    </div>
-    <div
-      class="t-cell__title"
-    >
-      单行标题
       <!--v-if-->
       <div
-        class="t-cell__description"
+        class="t-cell__right"
       >
-        一段很长很长的内容文字
+        <div
+          class="t-cell__right-icon"
+        >
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
     <div
-      class="t-cell__note"
+      class="t-cell t-cell--middle"
     >
-      
       <div
-        class="t-badge"
+        class="t-cell__left"
+      >
+        <!--v-if-->
+        <!---->
+      </div>
+      <div
+        class="t-cell__title"
       >
+        单行标题
+        <!--v-if-->
         <div
-          class="t-badge__content"
+          class="t-cell__description"
         >
-          <!---->
+          一段很长很长的内容文字
         </div>
+      </div>
+      <div
+        class="t-cell__note"
+      >
+        
         <div
-          class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+          class="t-badge"
         >
-          <!--v-if-->
-           16 
-          <!--v-if-->
+          <div
+            class="t-badge__content"
+          >
+            <!---->
+          </div>
+          <div
+            class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+          >
+            <!--v-if-->
+             16 
+            <!--v-if-->
+          </div>
+          <!---->
         </div>
-        <!---->
+        
       </div>
-      
-    </div>
-    <div
-      class="t-cell__right"
-    >
       <div
-        class="t-cell__right-icon"
-      >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__right"
+      >
+        <div
+          class="t-cell__right-icon"
         >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
-    <div
-      class="t-cell__left"
-    >
-      <!--v-if-->
-      <!---->
-    </div>
     <div
-      class="t-cell__title"
+      class="t-cell t-cell--middle"
     >
-      单行标题
-      <!--v-if-->
       <div
-        class="t-cell__description"
+        class="t-cell__left"
       >
-        一段很长很长的内容文字
+        <!--v-if-->
+        <!---->
+      </div>
+      <div
+        class="t-cell__title"
+      >
+        单行标题
+        <!--v-if-->
+        <div
+          class="t-cell__description"
+        >
+          一段很长很长的内容文字
+        </div>
       </div>
-    </div>
-    <div
-      class="t-cell__note"
-    >
-      
       <div
-        class="t-switch t-switch--medium t-switch--checked"
+        class="t-cell__note"
       >
+        
         <div
-          class="t-switch__dot t-switch__dot--medium t-switch__dot--checked t-switch__dot--plain"
+          class="t-switch t-switch--medium t-switch--checked"
         >
           <div
-            class="t-switch__label t-switch__label--medium t-switch__label--checked"
+            class="t-switch__dot t-switch__dot--medium t-switch__dot--checked t-switch__dot--plain"
           >
-            <!--v-if-->
-            <!---->
+            <div
+              class="t-switch__label t-switch__label--medium t-switch__label--checked"
+            >
+              <!--v-if-->
+              <!---->
+            </div>
           </div>
         </div>
+        
       </div>
-      
-    </div>
-    <!--v-if-->
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
-    <div
-      class="t-cell__left"
-    >
       <!--v-if-->
-      <!---->
     </div>
     <div
-      class="t-cell__title"
+      class="t-cell t-cell--middle"
     >
-      单行标题
-      <!--v-if-->
       <div
-        class="t-cell__description"
+        class="t-cell__left"
       >
-        一段很长很长的内容文字
+        <!--v-if-->
+        <!---->
       </div>
-    </div>
-    <div
-      class="t-cell__note"
-    >
-      辅助信息
-    </div>
-    <div
-      class="t-cell__right"
-    >
       <div
-        class="t-cell__right-icon"
-      >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__title"
+      >
+        单行标题
+        <!--v-if-->
+        <div
+          class="t-cell__description"
         >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          一段很长很长的内容文字
+        </div>
       </div>
-    </div>
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
-    <div
-      class="t-cell__left"
-    >
       <div
-        class="t-cell__left-icon"
+        class="t-cell__note"
       >
-        
-        <svg
-          class="t-icon t-icon-lock-on"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M6 10v1h4v-1H6z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-          <path
-            d="M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        
+        辅助信息
       </div>
-      <!---->
-    </div>
-    <div
-      class="t-cell__title"
-    >
-      单行标题
-      <!--v-if-->
       <div
-        class="t-cell__description"
+        class="t-cell__right"
       >
-        一段很长很长的内容文字
+        <div
+          class="t-cell__right-icon"
+        >
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
-    <!--v-if-->
     <div
-      class="t-cell__right"
+      class="t-cell t-cell--middle"
     >
       <div
-        class="t-cell__right-icon"
-      >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__left"
+      >
+        <div
+          class="t-cell__left-icon"
         >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          
+          <svg
+            class="t-icon t-icon-lock-on"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6 10v1h4v-1H6z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+            <path
+              d="M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+          
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-cell__title"
+      >
+        单行标题
+        <!--v-if-->
+        <div
+          class="t-cell__description"
+        >
+          一段很长很长的内容文字
+        </div>
       </div>
-    </div>
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
-    <div
-      class="t-cell__left"
-    >
-      <!--v-if-->
-      <!---->
-    </div>
-    <div
-      class="t-cell__title"
-    >
-      单行标题
       <!--v-if-->
       <div
-        class="t-cell__description"
+        class="t-cell__right"
       >
-        一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
+        <div
+          class="t-cell__right-icon"
+        >
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
-    <!--v-if-->
-    <!--v-if-->
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
     <div
-      class="t-cell__left"
+      class="t-cell t-cell--middle"
     >
+      <div
+        class="t-cell__left"
+      >
+        <!--v-if-->
+        <!---->
+      </div>
+      <div
+        class="t-cell__title"
+      >
+        单行标题
+        <!--v-if-->
+        <div
+          class="t-cell__description"
+        >
+          一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
+        </div>
+      </div>
+      <!--v-if-->
       <!--v-if-->
-      <!---->
     </div>
     <div
-      class="t-cell__title"
+      class="t-cell t-cell--middle"
     >
-      多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
-      <!--v-if-->
       <div
-        class="t-cell__description"
+        class="t-cell__left"
       >
-        一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
+        <!--v-if-->
+        <!---->
       </div>
+      <div
+        class="t-cell__title"
+      >
+        多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
+        <!--v-if-->
+        <div
+          class="t-cell__description"
+        >
+          一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
+        </div>
+      </div>
+      <!--v-if-->
+      <!--v-if-->
     </div>
-    <!--v-if-->
-    <!--v-if-->
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
     <div
-      class="t-cell__left"
+      class="t-cell t-cell--middle"
     >
       <div
-        class="t-cell__left-icon"
+        class="t-cell__left"
       >
-        
         <div
-          class="t-avatar__wrapper"
+          class="t-cell__left-icon"
         >
+          
           <div
-            class="t-avatar__badge"
+            class="t-avatar__wrapper"
           >
             <div
-              class="t-badge"
+              class="t-avatar__badge"
             >
               <div
-                class="t-badge__content"
+                class="t-badge"
               >
-                
                 <div
-                  class="t-avatar t-avatar--medium t-avatar--circle"
+                  class="t-badge__content"
                 >
+                  
                   <div
-                    class="t-image t-image--square"
+                    class="t-avatar t-avatar--medium t-avatar--circle"
                   >
                     <div
-                      class="t-image__mask"
+                      class="t-image t-image--square"
                     >
                       <div
-                        class="t-loading"
-                        style="font-size: 20px;"
+                        class="t-image__mask"
                       >
                         <div
-                          class="t-loading__dots"
-                          style="animation-duration: 800ms; width: 20px; height: 20px;"
+                          class="t-loading"
+                          style="font-size: 20px;"
                         >
-                          
                           <div
-                            class="t-loading__dot"
-                            style="animation-duration: 0.8s; animation-delay: 0s;"
-                          />
-                          <div
-                            class="t-loading__dot"
-                            style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
-                          />
-                          <div
-                            class="t-loading__dot"
-                            style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
-                          />
-                          
+                            class="t-loading__dots"
+                            style="animation-duration: 800ms; width: 20px; height: 20px;"
+                          >
+                            
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0s;"
+                            />
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                            />
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                            />
+                            
+                          </div>
+                          <!--v-if-->
+                          <!---->
                         </div>
-                        <!--v-if-->
-                        <!---->
                       </div>
+                      <picture>
+                        <!--v-if-->
+                        <img
+                          alt=""
+                          class="t-image__img"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
+                          style="object-fit: fill; object-position: center;"
+                        />
+                      </picture>
                     </div>
-                    <picture>
-                      <!--v-if-->
-                      <img
-                        alt=""
-                        class="t-image__img"
-                        src="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-                        style="object-fit: fill; object-position: center;"
-                      />
-                    </picture>
                   </div>
+                  
                 </div>
-                
+                <!--v-if-->
+                <!---->
               </div>
-              <!--v-if-->
-              <!---->
             </div>
           </div>
+          
         </div>
-        
+        <!---->
       </div>
-      <!---->
-    </div>
-    <div
-      class="t-cell__title"
-    >
-      多行带头像
-      <!--v-if-->
       <div
-        class="t-cell__description"
+        class="t-cell__title"
       >
-        一段很长很长的内容文字
+        多行带头像
+        <!--v-if-->
+        <div
+          class="t-cell__description"
+        >
+          一段很长很长的内容文字
+        </div>
       </div>
-    </div>
-    <!--v-if-->
-    <div
-      class="t-cell__right"
-    >
+      <!--v-if-->
       <div
-        class="t-cell__right-icon"
-      >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__right"
+      >
+        <div
+          class="t-cell__right-icon"
         >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
-    <div
-      class="t-cell__left"
-    >
-      <!--v-if-->
-      <img
-        class="t-cell__left-image"
-        src="https://tdesign.gtimg.com/miniprogram/images/example1.png"
-      />
-    </div>
     <div
-      class="t-cell__title"
+      class="t-cell t-cell--middle"
     >
-      多行带图片
-      <!--v-if-->
       <div
-        class="t-cell__description"
+        class="t-cell__left"
+      >
+        <!--v-if-->
+        <img
+          class="t-cell__left-image"
+          src="https://tdesign.gtimg.com/miniprogram/images/example1.png"
+        />
+      </div>
+      <div
+        class="t-cell__title"
       >
-        一段很长很长的内容文字
+        多行带图片
+        <!--v-if-->
+        <div
+          class="t-cell__description"
+        >
+          一段很长很长的内容文字
+        </div>
       </div>
+      <!--v-if-->
+      <!--v-if-->
     </div>
-    <!--v-if-->
-    <!--v-if-->
+    
   </div>
   
 </div>
@@ -1755,293 +1770,299 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
 
 exports[`Cell > Cell singleVue demo works fine 1`] = `
 <div
-  class="t-cell-group t-cell-group--default"
+  data-v-app=""
 >
-  <!--v-if-->
   
+  <!--v-if-->
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell-group t-cell-group--default t-cell-group--bordered"
   >
+    
     <div
-      class="t-cell__left"
+      class="t-cell t-cell--middle"
     >
+      <div
+        class="t-cell__left"
+      >
+        <!--v-if-->
+        <!---->
+      </div>
+      <div
+        class="t-cell__title"
+      >
+        单行标题
+        <!--v-if-->
+        <!--v-if-->
+      </div>
       <!--v-if-->
-      <!---->
-    </div>
-    <div
-      class="t-cell__title"
-    >
-      单行标题
-      <!--v-if-->
-      <!--v-if-->
-    </div>
-    <!--v-if-->
-    <div
-      class="t-cell__right"
-    >
       <div
-        class="t-cell__right-icon"
-      >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__right"
+      >
+        <div
+          class="t-cell__right-icon"
         >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
-    <div
-      class="t-cell__left"
-    >
-      <!--v-if-->
-      <!---->
-    </div>
     <div
-      class="t-cell__title"
+      class="t-cell t-cell--middle"
     >
-      单行标题
-      <span
-        class="t-cell--required"
+      <div
+        class="t-cell__left"
       >
-         *
-      </span>
-      <!--v-if-->
-    </div>
-    <!--v-if-->
-    <div
-      class="t-cell__right"
-    >
+        <!--v-if-->
+        <!---->
+      </div>
       <div
-        class="t-cell__right-icon"
-      >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__title"
+      >
+        单行标题
+        <span
+          class="t-cell--required"
         >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+           *
+        </span>
+        <!--v-if-->
       </div>
-    </div>
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
-    <div
-      class="t-cell__left"
-    >
-      <!--v-if-->
-      <!---->
-    </div>
-    <div
-      class="t-cell__title"
-    >
-      单行标题
-      <!--v-if-->
       <!--v-if-->
+      <div
+        class="t-cell__right"
+      >
+        <div
+          class="t-cell__right-icon"
+        >
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+      </div>
     </div>
     <div
-      class="t-cell__note"
+      class="t-cell t-cell--middle"
     >
-      
       <div
-        class="t-badge"
+        class="t-cell__left"
+      >
+        <!--v-if-->
+        <!---->
+      </div>
+      <div
+        class="t-cell__title"
       >
+        单行标题
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div
+        class="t-cell__note"
+      >
+        
         <div
-          class="t-badge__content"
+          class="t-badge"
         >
+          <div
+            class="t-badge__content"
+          >
+            <!---->
+          </div>
+          <div
+            class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+          >
+            <!--v-if-->
+             16 
+            <!--v-if-->
+          </div>
           <!---->
         </div>
+        
+      </div>
+      <div
+        class="t-cell__right"
+      >
         <div
-          class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+          class="t-cell__right-icon"
         >
-          <!--v-if-->
-           16 
-          <!--v-if-->
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
         </div>
-        <!---->
       </div>
-      
     </div>
     <div
-      class="t-cell__right"
+      class="t-cell t-cell--middle"
     >
       <div
-        class="t-cell__right-icon"
-      >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+        class="t-cell__left"
+      >
+        <!--v-if-->
+        <!---->
       </div>
-    </div>
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
-    <div
-      class="t-cell__left"
-    >
-      <!--v-if-->
-      <!---->
-    </div>
-    <div
-      class="t-cell__title"
-    >
-      单行标题
-      <!--v-if-->
-      <!--v-if-->
-    </div>
-    <div
-      class="t-cell__note"
-    >
-      
       <div
-        class="t-switch t-switch--medium t-switch--checked"
+        class="t-cell__title"
       >
+        单行标题
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div
+        class="t-cell__note"
+      >
+        
         <div
-          class="t-switch__dot t-switch__dot--medium t-switch__dot--checked t-switch__dot--plain"
+          class="t-switch t-switch--medium t-switch--checked"
         >
           <div
-            class="t-switch__label t-switch__label--medium t-switch__label--checked"
+            class="t-switch__dot t-switch__dot--medium t-switch__dot--checked t-switch__dot--plain"
           >
-            <!--v-if-->
-            <!---->
+            <div
+              class="t-switch__label t-switch__label--medium t-switch__label--checked"
+            >
+              <!--v-if-->
+              <!---->
+            </div>
           </div>
         </div>
+        
       </div>
-      
-    </div>
-    <!--v-if-->
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
-    <div
-      class="t-cell__left"
-    >
-      <!--v-if-->
-      <!---->
-    </div>
-    <div
-      class="t-cell__title"
-    >
-      单行标题
       <!--v-if-->
-      <!--v-if-->
-    </div>
-    <div
-      class="t-cell__note"
-    >
-      辅助信息
     </div>
     <div
-      class="t-cell__right"
+      class="t-cell t-cell--middle"
     >
       <div
-        class="t-cell__right-icon"
-      >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__left"
+      >
+        <!--v-if-->
+        <!---->
+      </div>
+      <div
+        class="t-cell__title"
+      >
+        单行标题
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div
+        class="t-cell__note"
+      >
+        辅助信息
+      </div>
+      <div
+        class="t-cell__right"
+      >
+        <div
+          class="t-cell__right-icon"
         >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    class="t-cell t-cell--middle"
-  >
     <div
-      class="t-cell__left"
+      class="t-cell t-cell--middle"
     >
       <div
-        class="t-cell__left-icon"
-      >
-        <svg
-          class="t-icon t-icon-lock-on"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__left"
+      >
+        <div
+          class="t-cell__left-icon"
         >
-          <path
-            d="M6 10v1h4v-1H6z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-          <path
-            d="M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-lock-on"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6 10v1h4v-1H6z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+            <path
+              d="M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <!---->
+      </div>
+      <div
+        class="t-cell__title"
+      >
+        单行标题
+        <!--v-if-->
+        <!--v-if-->
       </div>
-      <!---->
-    </div>
-    <div
-      class="t-cell__title"
-    >
-      单行标题
-      <!--v-if-->
       <!--v-if-->
-    </div>
-    <!--v-if-->
-    <div
-      class="t-cell__right"
-    >
       <div
-        class="t-cell__right-icon"
-      >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        class="t-cell__right"
+      >
+        <div
+          class="t-cell__right-icon"
         >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
+    
   </div>
   
 </div>
diff --git a/src/collapse/__test__/__snapshots__/demo.test.jsx.snap b/src/collapse/__test__/__snapshots__/demo.test.jsx.snap
index 11bf8aec..f9a2a28f 100644
--- a/src/collapse/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/collapse/__test__/__snapshots__/demo.test.jsx.snap
@@ -8,7 +8,6 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
   
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -77,7 +76,6 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -146,7 +144,6 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -215,7 +212,6 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--disabled"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -294,7 +290,6 @@ exports[`Collapse > Collapse actionVue demo works fine 1`] = `
   
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -372,7 +367,6 @@ exports[`Collapse > Collapse baseVue demo works fine 1`] = `
   
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -451,7 +445,6 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
   
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -520,7 +513,6 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -589,7 +581,6 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -658,7 +649,6 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--disabled"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -771,7 +761,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -866,7 +855,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         
         <div
           class="t-collapse-panel t-collapse-panel--top"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -957,7 +945,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1053,7 +1040,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1122,7 +1108,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1191,7 +1176,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1260,7 +1244,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--disabled"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1361,7 +1344,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1430,7 +1412,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1499,7 +1480,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1568,7 +1548,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--disabled"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1651,7 +1630,6 @@ exports[`Collapse > Collapse placementVue demo works fine 1`] = `
   
   <div
     class="t-collapse-panel t-collapse-panel--top"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
diff --git a/src/indexes/__test__/__snapshots__/demo.test.jsx.snap b/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
index f596333c..a23d9ced 100644
--- a/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
@@ -99,10 +99,11 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -281,6 +282,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
     </div>
     
     
+    
     <div
       class="t-indexes-anchor"
       data-index="B"
@@ -301,10 +303,11 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -578,6 +581,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
     </div>
     
     
+    
     <div
       class="t-indexes-anchor"
       data-index="C"
@@ -598,10 +602,11 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -970,6 +975,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
     </div>
     
     
+    
     <div
       class="t-indexes-anchor"
       data-index="D"
@@ -990,10 +996,11 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -1248,6 +1255,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
     </div>
     
     
+    
     <div
       class="t-indexes-anchor"
       data-index="E"
@@ -1268,10 +1276,11 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -1336,6 +1345,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
     </div>
     
     
+    
     <div
       class="t-indexes-anchor"
       data-index="F"
@@ -1356,10 +1366,11 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -1500,6 +1511,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
     </div>
     
     
+    
     <div
       class="t-indexes-anchor"
       data-index="G"
@@ -1520,10 +1532,11 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -1721,6 +1734,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
     </div>
     
     
+    
     <div
       class="t-indexes-anchor"
       data-index="J"
@@ -1741,10 +1755,11 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -1961,6 +1976,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
     </div>
     
     
+    
     <div
       class="t-indexes-anchor"
       data-index="K"
@@ -1981,10 +1997,11 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -2069,6 +2086,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
     
     
     
+    
   </div>
 </div>
 `;
@@ -2163,10 +2181,11 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -2269,6 +2288,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
     </div>
     
     
+    
     <div
       class="t-indexes-anchor"
       data-index="3"
@@ -2294,10 +2314,11 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -2400,6 +2421,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
     </div>
     
     
+    
     <div
       class="t-indexes-anchor"
       data-index="5"
@@ -2425,10 +2447,11 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -2531,6 +2554,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
     </div>
     
     
+    
     <div
       class="t-indexes-anchor"
       data-index="7"
@@ -2556,10 +2580,11 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -2662,6 +2687,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
     </div>
     
     
+    
     <div
       class="t-indexes-anchor"
       data-index="8"
@@ -2687,10 +2713,11 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -2793,6 +2820,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
     </div>
     
     
+    
     <div
       class="t-indexes-anchor"
       data-index="10"
@@ -2818,10 +2846,11 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -2924,6 +2953,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
     </div>
     
     
+    
     <div
       class="t-indexes-anchor"
       data-index="#"
@@ -2949,10 +2979,11 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         </div>
       </div>
     </div>
+    
+    <!--v-if-->
     <div
       class="t-cell-group t-cell-group--default"
     >
-      <!--v-if-->
       
       
       <div
@@ -3056,6 +3087,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
     
     
     
+    
   </div>
 </div>
 `;
diff --git a/src/picker/__test__/__snapshots__/demo.test.jsx.snap b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
index 59fe67d1..9f01330b 100644
--- a/src/picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -499,10 +499,11 @@ exports[`Picker > Picker cascadeVue demo works fine 1`] = `
 >
   
   <!-- 联动选择 -->
+  
+  <!--v-if-->
   <div
     class="t-cell-group t-cell-group--default"
   >
-    <!--v-if-->
     
     <div
       class="t-cell t-cell--middle"
@@ -549,6 +550,7 @@ exports[`Picker > Picker cascadeVue demo works fine 1`] = `
     </div>
     
   </div>
+  
   <teleport-stub
     disabled="false"
     to="[object HTMLBodyElement]"
diff --git a/src/rate/__test__/__snapshots__/demo.test.jsx.snap b/src/rate/__test__/__snapshots__/demo.test.jsx.snap
index 210d8e4b..814678df 100644
--- a/src/rate/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/rate/__test__/__snapshots__/demo.test.jsx.snap
@@ -702,28 +702,28 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
             class="t-rate__icon-left t-rate__icon-left--selected"
           >
             <svg
-              class="t-icon t-icon-star"
+              class="t-icon t-icon-star-filled"
               fill="none"
               height="1em"
               viewBox="0 0 16 16"
               width="1em"
             >
               <path
-                d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                 fill="currentColor"
                 fill-opacity="0.9"
               />
             </svg>
           </div>
           <svg
-            class="t-icon t-icon-star"
+            class="t-icon t-icon-star-filled"
             fill="none"
             height="1em"
             viewBox="0 0 16 16"
             width="1em"
           >
             <path
-              d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+              d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
               fill="currentColor"
               fill-opacity="0.9"
             />
@@ -738,28 +738,28 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
             class="t-rate__icon-left t-rate__icon-left--selected"
           >
             <svg
-              class="t-icon t-icon-star"
+              class="t-icon t-icon-star-filled"
               fill="none"
               height="1em"
               viewBox="0 0 16 16"
               width="1em"
             >
               <path
-                d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                 fill="currentColor"
                 fill-opacity="0.9"
               />
             </svg>
           </div>
           <svg
-            class="t-icon t-icon-star"
+            class="t-icon t-icon-star-filled"
             fill="none"
             height="1em"
             viewBox="0 0 16 16"
             width="1em"
           >
             <path
-              d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+              d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
               fill="currentColor"
               fill-opacity="0.9"
             />
@@ -774,28 +774,28 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
             class="t-rate__icon-left t-rate__icon-left--unselected"
           >
             <svg
-              class="t-icon t-icon-star"
+              class="t-icon t-icon-star-filled"
               fill="none"
               height="1em"
               viewBox="0 0 16 16"
               width="1em"
             >
               <path
-                d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                 fill="currentColor"
                 fill-opacity="0.9"
               />
             </svg>
           </div>
           <svg
-            class="t-icon t-icon-star"
+            class="t-icon t-icon-star-filled"
             fill="none"
             height="1em"
             viewBox="0 0 16 16"
             width="1em"
           >
             <path
-              d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+              d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
               fill="currentColor"
               fill-opacity="0.9"
             />
@@ -810,28 +810,28 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
             class="t-rate__icon-left t-rate__icon-left--unselected"
           >
             <svg
-              class="t-icon t-icon-star"
+              class="t-icon t-icon-star-filled"
               fill="none"
               height="1em"
               viewBox="0 0 16 16"
               width="1em"
             >
               <path
-                d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                 fill="currentColor"
                 fill-opacity="0.9"
               />
             </svg>
           </div>
           <svg
-            class="t-icon t-icon-star"
+            class="t-icon t-icon-star-filled"
             fill="none"
             height="1em"
             viewBox="0 0 16 16"
             width="1em"
           >
             <path
-              d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+              d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
               fill="currentColor"
               fill-opacity="0.9"
             />
@@ -846,28 +846,28 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
             class="t-rate__icon-left t-rate__icon-left--unselected"
           >
             <svg
-              class="t-icon t-icon-star"
+              class="t-icon t-icon-star-filled"
               fill="none"
               height="1em"
               viewBox="0 0 16 16"
               width="1em"
             >
               <path
-                d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                 fill="currentColor"
                 fill-opacity="0.9"
               />
             </svg>
           </div>
           <svg
-            class="t-icon t-icon-star"
+            class="t-icon t-icon-star-filled"
             fill="none"
             height="1em"
             viewBox="0 0 16 16"
             width="1em"
           >
             <path
-              d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+              d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
               fill="currentColor"
               fill-opacity="0.9"
             />
@@ -2747,28 +2747,28 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
                 class="t-rate__icon-left t-rate__icon-left--selected"
               >
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
                 </svg>
               </div>
               <svg
-                class="t-icon t-icon-star"
+                class="t-icon t-icon-star-filled"
                 fill="none"
                 height="1em"
                 viewBox="0 0 16 16"
                 width="1em"
               >
                 <path
-                  d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                  d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                   fill="currentColor"
                   fill-opacity="0.9"
                 />
@@ -2783,28 +2783,28 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
                 class="t-rate__icon-left t-rate__icon-left--selected"
               >
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
                 </svg>
               </div>
               <svg
-                class="t-icon t-icon-star"
+                class="t-icon t-icon-star-filled"
                 fill="none"
                 height="1em"
                 viewBox="0 0 16 16"
                 width="1em"
               >
                 <path
-                  d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                  d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                   fill="currentColor"
                   fill-opacity="0.9"
                 />
@@ -2819,28 +2819,28 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
                 class="t-rate__icon-left t-rate__icon-left--unselected"
               >
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
                 </svg>
               </div>
               <svg
-                class="t-icon t-icon-star"
+                class="t-icon t-icon-star-filled"
                 fill="none"
                 height="1em"
                 viewBox="0 0 16 16"
                 width="1em"
               >
                 <path
-                  d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                  d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                   fill="currentColor"
                   fill-opacity="0.9"
                 />
@@ -2855,28 +2855,28 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
                 class="t-rate__icon-left t-rate__icon-left--unselected"
               >
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
                 </svg>
               </div>
               <svg
-                class="t-icon t-icon-star"
+                class="t-icon t-icon-star-filled"
                 fill="none"
                 height="1em"
                 viewBox="0 0 16 16"
                 width="1em"
               >
                 <path
-                  d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                  d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                   fill="currentColor"
                   fill-opacity="0.9"
                 />
@@ -2891,28 +2891,28 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
                 class="t-rate__icon-left t-rate__icon-left--unselected"
               >
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
                 </svg>
               </div>
               <svg
-                class="t-icon t-icon-star"
+                class="t-icon t-icon-star-filled"
                 fill="none"
                 height="1em"
                 viewBox="0 0 16 16"
                 width="1em"
               >
                 <path
-                  d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                  d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                   fill="currentColor"
                   fill-opacity="0.9"
                 />
diff --git a/src/rate/__test__/index.test.jsx b/src/rate/__test__/index.test.jsx
index a01ea199..8d76d9f6 100644
--- a/src/rate/__test__/index.test.jsx
+++ b/src/rate/__test__/index.test.jsx
@@ -1,7 +1,7 @@
 import { ref, nextTick, markRaw } from 'vue';
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import { ThumbUpIcon, ThumbDownIcon, StarIcon } from 'tdesign-icons-vue-next';
+import { ThumbUpIcon, ThumbDownIcon, StarFilledIcon } from 'tdesign-icons-vue-next';
 import Rate from '../rate.vue';
 import { trigger } from '../../image-viewer/__test__/touch';
 
@@ -20,7 +20,7 @@ describe('Rate', () => {
     expect(wrapper.classes()).toContain(`${name}`);
     const items = wrapper.findAll(`.${name}__icon`);
     expect(items.length).toBe(5);
-    const icon = wrapper.findComponent(StarIcon);
+    const icon = wrapper.findComponent(StarFilledIcon);
     expect(icon.exists()).toBeTruthy();
 
     const $target = wrapper.find(`.${name}__wrapper`);