Repository: Tencent/tdesign-mobile-vue
Pull request #600 (2023-04-17 16:57:20)

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



Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 02261a7f..a0b64d47 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -620,4 +620,4 @@ spline: explain
 
 ### BREAKING CHANGES
 
-* 对齐已发布组件的API能力
+* 对齐已发布组件的API能力
\ No newline at end of file
diff --git a/src/divider/demos/align.vue b/src/divider/demos/align.vue
deleted file mode 100644
index 7db53aad..00000000
--- a/src/divider/demos/align.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div>
-    <h3>文字+直线</h3>
-    <t-divider class="demo-5"> 文字信息 </t-divider>
-
-    <h3>文字+虚线</h3>
-    <t-divider class="demo-5" dashed> 文字信息 </t-divider>
-  </div>
-</template>
-
-<style lang="less" scoped>
-h3 {
-  font-size: 12px;
-  font-weight: 400;
-  font-family: 'PingFang SC';
-  color: #a9a9a9;
-  padding: 16px;
-}
-</style>
diff --git a/src/divider/demos/base.vue b/src/divider/demos/base.vue
index b1560882..449f2d85 100644
--- a/src/divider/demos/base.vue
+++ b/src/divider/demos/base.vue
@@ -1,40 +1,36 @@
 <template>
   <div>
-    <h3>直线拉通</h3>
-    <t-divider></t-divider>
-
-    <h3>虚线拉通</h3>
-    <t-divider dashed></t-divider>
-
-    <h3>左右间距</h3>
-    <t-divider class="demo-2"></t-divider>
-
-    <h3>右侧拉通</h3>
-    <t-divider class="demo-3"></t-divider>
-
-    <h3>自定义左侧间距</h3>
-    <t-divider class="demo-4"></t-divider>
+    <div class="divider-demo__title">水平分割线</div>
+    <t-divider />
+
+    <div class="divider-demo__title">带文字水平分割线</div>
+    <t-divider content="文字信息" align="left" />
+    <t-divider content="文字信息" />
+    <t-divider content="文字信息" align="right" />
+
+    <div class="divider-demo__title" style="margin-bottom: 10px">垂直分割线</div>
+    <view class="divider-wrapper">
+      <span>文字信息</span>
+      <t-divider layout="vertical" />
+      <span>文字信息</span>
+      <t-divider layout="vertical" />
+      <span>文字信息</span>
+    </view>
   </div>
 </template>
 
 <style lang="less" scoped>
-h3 {
-  font-size: 12px;
-  font-weight: 400;
-  font-family: 'PingFang SC';
-  color: #a9a9a9;
-  padding: 16px;
+.divider-demo__title {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+  padding: 8px 16px;
+  line-height: 20px;
 }
-
-.demo-2 {
-  margin: 10px 16px;
-}
-
-.demo-3 {
-  margin-left: 16px;
-}
-
-.demo-4 {
-  margin-left: 76px;
+.divider-wrapper {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.9);
+  padding-left: 16px;
 }
 </style>
diff --git a/src/divider/demos/mobile.vue b/src/divider/demos/mobile.vue
index 9875e22c..c71dd9e0 100644
--- a/src/divider/demos/mobile.vue
+++ b/src/divider/demos/mobile.vue
@@ -2,18 +2,18 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Divider 分割符</h1>
     <p class="summary">用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。</p>
-    <tdesign-demo-block title="01 类型" summary="分割符主要是由直线和文字组成">
-      <div style="background: #fff">
-        <baseDemo />
-        <alignDemo />
-        <verticalDemo />
-      </div>
+    <tdesign-demo-block title="01 组件类型">
+      <BaseDemo />
+    </tdesign-demo-block>
+    <tdesign-demo-block title="02 组件状态">
+      <ThemeDemo />
     </tdesign-demo-block>
   </div>
 </template>
 <script lang="ts" setup>
-import baseDemo from './base.vue';
-import alignDemo from './align.vue';
-import verticalDemo from './vertical.vue';
-import '../style/index.less';
+import BaseDemo from './base.vue';
+import ThemeDemo from './theme.vue';
 </script>
+<style lang="less" scoped>
+@import '../style/index.less';
+</style>
diff --git a/src/divider/demos/theme.vue b/src/divider/demos/theme.vue
new file mode 100644
index 00000000..4c82393f
--- /dev/null
+++ b/src/divider/demos/theme.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <div class="divider-demo__title">虚线样式</div>
+    <t-divider dashed />
+    <t-divider dashed content="文字信息" align="left" />
+    <t-divider dashed content="文字信息" />
+    <t-divider dashed content="文字信息" align="right" />
+  </div>
+</template>
+<style lang="less" scoped>
+.divider-demo__title {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+  padding: 8px 16px;
+  line-height: 20px;
+}
+</style>
diff --git a/src/divider/demos/vertical.vue b/src/divider/demos/vertical.vue
deleted file mode 100644
index effbab86..00000000
--- a/src/divider/demos/vertical.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div class="divider-container">
-    <h3>纯文字</h3>
-    <t-divider line-color="transparent"> 没有更多了~ </t-divider>
-
-    <h3>垂直分割</h3>
-    <div class="demo-6">
-      <span>文字信息</span>
-      <t-divider layout="vertical"></t-divider>
-      <span>文字信息</span>
-      <t-divider layout="vertical"></t-divider>
-      <span>文字信息</span>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.divider-container {
-  padding-bottom: 16px;
-
-  h3 {
-    font-size: 12px;
-    font-weight: 400;
-    font-family: 'PingFang SC';
-    color: #a9a9a9;
-    padding: 16px;
-  }
-
-  .demo-6 {
-    display: flex;
-    height: 20px;
-    color: #a9a9a9;
-    line-height: 20px;
-    align-items: center;
-    margin: 0 16px;
-    font-size: 12px;
-    .t-divider {
-      height: 12px;
-    }
-  }
-}
-</style>
diff --git a/src/divider/divider.md b/src/divider/divider.md
index a260db85..d56f7b96 100644
--- a/src/divider/divider.md
+++ b/src/divider/divider.md
@@ -10,4 +10,3 @@ content | String / Slot / Function | - | 子元素。TS 类型：`string | TNode
 dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
 default | String / Slot / Function | - | 子元素，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
-lineColor | String | - | 分隔线颜色 | N
diff --git a/src/divider/divider.vue b/src/divider/divider.vue
index 3de191ba..feac06db 100644
--- a/src/divider/divider.vue
+++ b/src/divider/divider.vue
@@ -1,10 +1,14 @@
 <template>
-  <div role="separator" :class="dividerClass" :style="`border-color:${lineColor}`">
-    <t-node :content="dividerContent" />
+  <div role="separator" :class="{ [`${name}--vertical-center`]: layout === 'vertical' }">
+    <div :class="dividerClass" :style="`border-color:${lineColor}`">
+      <div :class="`${name}__content`">
+        <t-node :content="dividerContent" />
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">
-import { computed, toRefs, defineComponent, getCurrentInstance, h } from 'vue';
+import { computed, toRefs, defineComponent, getCurrentInstance } from 'vue';
 import { renderContent, TNode } from '../shared';
 import DividerProps from './props';
 import config from '../config';
@@ -21,15 +25,15 @@ export default defineComponent({
     const dividerContent = computed(() => renderContent(internalInstance, 'default', 'content'));
     const dividerClass = computed(() => [
       `${name}`,
-      `${name}--hairline`,
+      `${name}--${props.layout}`,
+      `${name}--${props.align}`,
       {
-        [`${name}--content-${props.align}`]: dividerContent.value,
         [`${name}--dashed`]: props.dashed,
-        [`${name}-vertical`]: props.layout === 'vertical',
       },
     ]);
 
     return {
+      name,
       ...toRefs(props),
       dividerContent,
       dividerClass,
diff --git a/src/divider/style/index.js b/src/divider/style/index.js
index 042ba0d4..2bfdc5cb 100644
--- a/src/divider/style/index.js
+++ b/src/divider/style/index.js
@@ -1,1 +1,1 @@
-import '../../_common/style/mobile/components/divider/_index.less';
+import '../../_common/style/mobile/components/divider/v2/_index.less';
diff --git a/src/radio/radio.vue b/src/radio/radio.vue
index 6ee85e43..cbf4bb44 100644
--- a/src/radio/radio.vue
+++ b/src/radio/radio.vue
@@ -125,6 +125,7 @@ export default defineComponent({
     ]);
 
     const radioContentChange = (e: Event) => {
+      console.log('radioContentChange', props.contentDisabled);
       if (props.contentDisabled) {
         return;
       }


Test patch:
diff --git a/src/badge/__test__/index.test.jsx b/src/badge/__test__/index.test.jsx
index 074ac36c..b92c2538 100644
--- a/src/badge/__test__/index.test.jsx
+++ b/src/badge/__test__/index.test.jsx
@@ -2,8 +2,9 @@ import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import Badge from '../badge.vue';
 import Button from '../../button/button.vue';
+import config from '../../config';
 
-const prefix = 't';
+const { prefix } = config;
 const name = `${prefix}-badge`;
 const TEXT = 'Badge 徽标';
 
diff --git a/src/divider/__test__/__snapshots__/demo.test.jsx.snap b/src/divider/__test__/__snapshots__/demo.test.jsx.snap
index 8dc3dfe0..db5b3ceb 100644
--- a/src/divider/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/divider/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,123 +1,161 @@
 // Vitest Snapshot v1
 
-exports[`Divider > Divider alignVue demo works fine 1`] = `
-<div
-  data-v-7ac68ae7=""
->
-  <h3
-    data-v-7ac68ae7=""
-  >
-    文字+直线
-  </h3>
-  <div
-    class="t-divider t-divider--hairline t-divider--content-center demo-5"
-    data-v-7ac68ae7=""
-    role="separator"
-  >
-    
-     文字信息 
-    
-  </div>
-  <h3
-    data-v-7ac68ae7=""
-  >
-    文字+虚线
-  </h3>
-  <div
-    class="t-divider t-divider--hairline t-divider--content-center t-divider--dashed demo-5"
-    data-v-7ac68ae7=""
-    role="separator"
-  >
-    
-     文字信息 
-    
-  </div>
-</div>
-`;
-
 exports[`Divider > Divider baseVue demo works fine 1`] = `
 <div
   data-v-589c0842=""
 >
-  <h3
+  <div
+    class="divider-demo__title"
     data-v-589c0842=""
   >
-    直线拉通
-  </h3>
+    水平分割线
+  </div>
   <div
-    class="t-divider t-divider--hairline"
+    class=""
     data-v-589c0842=""
     role="separator"
   >
-    <!---->
+    <div
+      class="t-divider t-divider--horizontal t-divider--center"
+    >
+      <div
+        class="t-divider__content"
+      >
+        <!---->
+      </div>
+    </div>
   </div>
-  <h3
+  <div
+    class="divider-demo__title"
     data-v-589c0842=""
   >
-    虚线拉通
-  </h3>
+    带文字水平分割线
+  </div>
   <div
-    class="t-divider t-divider--hairline t-divider--dashed"
+    class=""
     data-v-589c0842=""
     role="separator"
   >
-    <!---->
+    <div
+      class="t-divider t-divider--horizontal t-divider--left"
+    >
+      <div
+        class="t-divider__content"
+      >
+        文字信息
+      </div>
+    </div>
   </div>
-  <h3
-    data-v-589c0842=""
-  >
-    左右间距
-  </h3>
   <div
-    class="t-divider t-divider--hairline demo-2"
+    class=""
     data-v-589c0842=""
     role="separator"
   >
-    <!---->
+    <div
+      class="t-divider t-divider--horizontal t-divider--center"
+    >
+      <div
+        class="t-divider__content"
+      >
+        文字信息
+      </div>
+    </div>
   </div>
-  <h3
-    data-v-589c0842=""
-  >
-    右侧拉通
-  </h3>
   <div
-    class="t-divider t-divider--hairline demo-3"
+    class=""
     data-v-589c0842=""
     role="separator"
   >
-    <!---->
+    <div
+      class="t-divider t-divider--horizontal t-divider--right"
+    >
+      <div
+        class="t-divider__content"
+      >
+        文字信息
+      </div>
+    </div>
   </div>
-  <h3
-    data-v-589c0842=""
-  >
-    自定义左侧间距
-  </h3>
   <div
-    class="t-divider t-divider--hairline demo-4"
+    class="divider-demo__title"
     data-v-589c0842=""
-    role="separator"
+    style="margin-bottom: 10px;"
   >
-    <!---->
+    垂直分割线
   </div>
+  <view
+    class="divider-wrapper"
+    data-v-589c0842=""
+  >
+    <span
+      data-v-589c0842=""
+    >
+      文字信息
+    </span>
+    <div
+      class="t-divider--vertical-center"
+      data-v-589c0842=""
+      role="separator"
+    >
+      <div
+        class="t-divider t-divider--vertical t-divider--center"
+      >
+        <div
+          class="t-divider__content"
+        >
+          <!---->
+        </div>
+      </div>
+    </div>
+    <span
+      data-v-589c0842=""
+    >
+      文字信息
+    </span>
+    <div
+      class="t-divider--vertical-center"
+      data-v-589c0842=""
+      role="separator"
+    >
+      <div
+        class="t-divider t-divider--vertical t-divider--center"
+      >
+        <div
+          class="t-divider__content"
+        >
+          <!---->
+        </div>
+      </div>
+    </div>
+    <span
+      data-v-589c0842=""
+    >
+      文字信息
+    </span>
+  </view>
 </div>
 `;
 
 exports[`Divider > Divider mobileVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
+  data-v-bf2b60a0=""
 >
   <h1
     class="title"
+    data-v-bf2b60a0=""
   >
     Divider 分割符
   </h1>
   <p
     class="summary"
+    data-v-bf2b60a0=""
   >
     用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。
   </p>
   <div
     class="tdesign-mobile-demo-block"
+    data-v-bf2b60a0=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
@@ -125,174 +163,237 @@ exports[`Divider > Divider mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        01 类型
+        01 组件类型
       </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary"
-      >
-        分割符主要是由直线和文字组成
-      </p>
+      <!--v-if-->
     </div>
     <div
       class="tdesign-mobile-demo-block__slot"
     >
       
       <div
-        style="background: rgb(255, 255, 255);"
+        data-v-589c0842=""
+        data-v-bf2b60a0=""
       >
         <div
+          class="divider-demo__title"
           data-v-589c0842=""
         >
-          <h3
-            data-v-589c0842=""
-          >
-            直线拉通
-          </h3>
+          水平分割线
+        </div>
+        <div
+          class=""
+          data-v-589c0842=""
+          role="separator"
+        >
           <div
-            class="t-divider t-divider--hairline"
-            data-v-589c0842=""
-            role="separator"
+            class="t-divider t-divider--horizontal t-divider--center"
           >
-            <!---->
+            <div
+              class="t-divider__content"
+            >
+              <!---->
+            </div>
           </div>
-          <h3
-            data-v-589c0842=""
-          >
-            虚线拉通
-          </h3>
+        </div>
+        <div
+          class="divider-demo__title"
+          data-v-589c0842=""
+        >
+          带文字水平分割线
+        </div>
+        <div
+          class=""
+          data-v-589c0842=""
+          role="separator"
+        >
           <div
-            class="t-divider t-divider--hairline t-divider--dashed"
-            data-v-589c0842=""
-            role="separator"
+            class="t-divider t-divider--horizontal t-divider--left"
           >
-            <!---->
+            <div
+              class="t-divider__content"
+            >
+              文字信息
+            </div>
           </div>
-          <h3
-            data-v-589c0842=""
+        </div>
+        <div
+          class=""
+          data-v-589c0842=""
+          role="separator"
+        >
+          <div
+            class="t-divider t-divider--horizontal t-divider--center"
           >
-            左右间距
-          </h3>
+            <div
+              class="t-divider__content"
+            >
+              文字信息
+            </div>
+          </div>
+        </div>
+        <div
+          class=""
+          data-v-589c0842=""
+          role="separator"
+        >
           <div
-            class="t-divider t-divider--hairline demo-2"
-            data-v-589c0842=""
-            role="separator"
+            class="t-divider t-divider--horizontal t-divider--right"
           >
-            <!---->
+            <div
+              class="t-divider__content"
+            >
+              文字信息
+            </div>
           </div>
-          <h3
+        </div>
+        <div
+          class="divider-demo__title"
+          data-v-589c0842=""
+          style="margin-bottom: 10px;"
+        >
+          垂直分割线
+        </div>
+        <view
+          class="divider-wrapper"
+          data-v-589c0842=""
+        >
+          <span
             data-v-589c0842=""
           >
-            右侧拉通
-          </h3>
+            文字信息
+          </span>
           <div
-            class="t-divider t-divider--hairline demo-3"
+            class="t-divider--vertical-center"
             data-v-589c0842=""
             role="separator"
           >
-            <!---->
+            <div
+              class="t-divider t-divider--vertical t-divider--center"
+            >
+              <div
+                class="t-divider__content"
+              >
+                <!---->
+              </div>
+            </div>
           </div>
-          <h3
+          <span
             data-v-589c0842=""
           >
-            自定义左侧间距
-          </h3>
+            文字信息
+          </span>
           <div
-            class="t-divider t-divider--hairline demo-4"
+            class="t-divider--vertical-center"
             data-v-589c0842=""
             role="separator"
           >
-            <!---->
+            <div
+              class="t-divider t-divider--vertical t-divider--center"
+            >
+              <div
+                class="t-divider__content"
+              >
+                <!---->
+              </div>
+            </div>
           </div>
+          <span
+            data-v-589c0842=""
+          >
+            文字信息
+          </span>
+        </view>
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+    data-v-bf2b60a0=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        02 组件状态
+      </h2>
+      <!--v-if-->
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        data-v-127b67ab=""
+        data-v-bf2b60a0=""
+      >
+        <div
+          class="divider-demo__title"
+          data-v-127b67ab=""
+        >
+          虚线样式
         </div>
         <div
-          data-v-7ac68ae7=""
+          class=""
+          data-v-127b67ab=""
+          role="separator"
         >
-          <h3
-            data-v-7ac68ae7=""
-          >
-            文字+直线
-          </h3>
           <div
-            class="t-divider t-divider--hairline t-divider--content-center demo-5"
-            data-v-7ac68ae7=""
-            role="separator"
+            class="t-divider t-divider--horizontal t-divider--center t-divider--dashed"
           >
-            
-             文字信息 
-            
+            <div
+              class="t-divider__content"
+            >
+              <!---->
+            </div>
           </div>
-          <h3
-            data-v-7ac68ae7=""
-          >
-            文字+虚线
-          </h3>
+        </div>
+        <div
+          class=""
+          data-v-127b67ab=""
+          role="separator"
+        >
           <div
-            class="t-divider t-divider--hairline t-divider--content-center t-divider--dashed demo-5"
-            data-v-7ac68ae7=""
-            role="separator"
+            class="t-divider t-divider--horizontal t-divider--left t-divider--dashed"
           >
-            
-             文字信息 
-            
+            <div
+              class="t-divider__content"
+            >
+              文字信息
+            </div>
           </div>
         </div>
         <div
-          class="divider-container"
-          data-v-0851d1f8=""
+          class=""
+          data-v-127b67ab=""
+          role="separator"
         >
-          <h3
-            data-v-0851d1f8=""
-          >
-            纯文字
-          </h3>
           <div
-            class="t-divider t-divider--hairline t-divider--content-center"
-            data-v-0851d1f8=""
-            role="separator"
-            style="border-color: transparent;"
+            class="t-divider t-divider--horizontal t-divider--center t-divider--dashed"
           >
-            
-             没有更多了~ 
-            
+            <div
+              class="t-divider__content"
+            >
+              文字信息
+            </div>
           </div>
-          <h3
-            data-v-0851d1f8=""
-          >
-            垂直分割
-          </h3>
+        </div>
+        <div
+          class=""
+          data-v-127b67ab=""
+          role="separator"
+        >
           <div
-            class="demo-6"
-            data-v-0851d1f8=""
+            class="t-divider t-divider--horizontal t-divider--right t-divider--dashed"
           >
-            <span
-              data-v-0851d1f8=""
-            >
-              文字信息
-            </span>
             <div
-              class="t-divider t-divider--hairline t-divider-vertical"
-              data-v-0851d1f8=""
-              role="separator"
-            >
-              <!---->
-            </div>
-            <span
-              data-v-0851d1f8=""
+              class="t-divider__content"
             >
               文字信息
-            </span>
-            <div
-              class="t-divider t-divider--hairline t-divider-vertical"
-              data-v-0851d1f8=""
-              role="separator"
-            >
-              <!---->
             </div>
-            <span
-              data-v-0851d1f8=""
-            >
-              文字信息
-            </span>
           </div>
         </div>
       </div>
@@ -302,64 +403,75 @@ exports[`Divider > Divider mobileVue demo works fine 1`] = `
 </div>
 `;
 
-exports[`Divider > Divider verticalVue demo works fine 1`] = `
+exports[`Divider > Divider themeVue demo works fine 1`] = `
 <div
-  class="divider-container"
-  data-v-0851d1f8=""
+  data-v-127b67ab=""
 >
-  <h3
-    data-v-0851d1f8=""
+  <div
+    class="divider-demo__title"
+    data-v-127b67ab=""
   >
-    纯文字
-  </h3>
+    虚线样式
+  </div>
   <div
-    class="t-divider t-divider--hairline t-divider--content-center"
-    data-v-0851d1f8=""
+    class=""
+    data-v-127b67ab=""
     role="separator"
-    style="border-color: transparent;"
   >
-    
-     没有更多了~ 
-    
+    <div
+      class="t-divider t-divider--horizontal t-divider--center t-divider--dashed"
+    >
+      <div
+        class="t-divider__content"
+      >
+        <!---->
+      </div>
+    </div>
   </div>
-  <h3
-    data-v-0851d1f8=""
-  >
-    垂直分割
-  </h3>
   <div
-    class="demo-6"
-    data-v-0851d1f8=""
+    class=""
+    data-v-127b67ab=""
+    role="separator"
   >
-    <span
-      data-v-0851d1f8=""
-    >
-      文字信息
-    </span>
     <div
-      class="t-divider t-divider--hairline t-divider-vertical"
-      data-v-0851d1f8=""
-      role="separator"
+      class="t-divider t-divider--horizontal t-divider--left t-divider--dashed"
     >
-      <!---->
+      <div
+        class="t-divider__content"
+      >
+        文字信息
+      </div>
     </div>
-    <span
-      data-v-0851d1f8=""
-    >
-      文字信息
-    </span>
+  </div>
+  <div
+    class=""
+    data-v-127b67ab=""
+    role="separator"
+  >
     <div
-      class="t-divider t-divider--hairline t-divider-vertical"
-      data-v-0851d1f8=""
-      role="separator"
+      class="t-divider t-divider--horizontal t-divider--center t-divider--dashed"
     >
-      <!---->
+      <div
+        class="t-divider__content"
+      >
+        文字信息
+      </div>
     </div>
-    <span
-      data-v-0851d1f8=""
+  </div>
+  <div
+    class=""
+    data-v-127b67ab=""
+    role="separator"
+  >
+    <div
+      class="t-divider t-divider--horizontal t-divider--right t-divider--dashed"
     >
-      文字信息
-    </span>
+      <div
+        class="t-divider__content"
+      >
+        文字信息
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/divider/__test__/demo.test.jsx b/src/divider/__test__/demo.test.jsx
index 761718c4..6880c2c2 100644
--- a/src/divider/__test__/demo.test.jsx
+++ b/src/divider/__test__/demo.test.jsx
@@ -3,16 +3,14 @@
  */
 
 import { mount } from '@vue/test-utils';
-import alignVue from '@/divider/demos/align.vue';
 import baseVue from '@/divider/demos/base.vue';
 import mobileVue from '@/divider/demos/mobile.vue';
-import verticalVue from '@/divider/demos/vertical.vue';
+import themeVue from '@/divider/demos/theme.vue';
 
 const mapper = {
-  alignVue,
   baseVue,
   mobileVue,
-  verticalVue,
+  themeVue,
 };
 
 describe('Divider', () => {
diff --git a/src/divider/__test__/index.test.jsx b/src/divider/__test__/index.test.jsx
index 3f207d6d..ced96773 100644
--- a/src/divider/__test__/index.test.jsx
+++ b/src/divider/__test__/index.test.jsx
@@ -1,8 +1,9 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import Divider from '../divider.vue';
+import config from '../../config';
 
-const prefix = 't';
+const { prefix } = config;
 const name = `${prefix}-divider`;
 const TEXT = 'tdesign-mobile-vue';
 
@@ -15,7 +16,7 @@ describe('divider.vue', async () => {
 
     it(': dashed', async () => {
       const wrapper = mount(() => <Divider dashed />);
-      expect(wrapper.classes()).toContain(`${name}--dashed`);
+      expect(wrapper.find(`.${name}`).classes()).toContain(`${name}--dashed`);
     });
 
     it(': align', async () => {
@@ -30,7 +31,7 @@ describe('divider.vue', async () => {
 
       // align = ''
       ['left', 'right', 'center'].map((item) => {
-        expect($divider.classes().includes(`${name}--content-${item}`)).toBeFalsy();
+        expect($divider.find(`.${name}`).classes().includes(`${name}--${item}`)).toBeFalsy();
       });
 
       const align = 'left';
@@ -38,7 +39,7 @@ describe('divider.vue', async () => {
         align,
       });
       // align = 'left'
-      expect($divider.classes()).toContain(`${name}--content-${align}`);
+      expect($divider.find(`.${name}`).classes()).toContain(`${name}--${align}`);
     });
 
     it(': layout', async () => {
@@ -53,7 +54,7 @@ describe('divider.vue', async () => {
 
       // layout = ''
       ['horizontal', 'vertical'].map((item) => {
-        expect($divider.classes().includes(`${name}-${item}`)).toBeFalsy();
+        expect($divider.find(`.${name}`).classes().includes(`${name}--${item}`)).toBeFalsy();
       });
 
       const layout = 'vertical';
@@ -61,12 +62,12 @@ describe('divider.vue', async () => {
         layout,
       });
       // layout = 'vertical'
-      expect($divider.classes()).toContain(`${name}-${layout}`);
+      expect($divider.find(`.${name}`).classes()).toContain(`${name}--${layout}`);
     });
 
     it(': lineColor', async () => {
       const wrapper = mount(() => <Divider lineColor="red" />);
-      expect(getComputedStyle(wrapper.element, null).borderColor).toBe('red');
+      expect(getComputedStyle(wrapper.element.firstChild, null).borderColor).toBe('red');
     });
   });
   describe('slot', async () => {
diff --git a/src/radio/__test__/index.test.jsx b/src/radio/__test__/index.test.jsx
index 6ca3107a..ef251fad 100644
--- a/src/radio/__test__/index.test.jsx
+++ b/src/radio/__test__/index.test.jsx
@@ -78,7 +78,6 @@ describe('Radio', () => {
         </RadioGroup>
       ));
       const [radio1, radio2] = wrapper.findAllComponents('.t-radio');
-
       expect(radio1.vm.checked).toBeTruthy();
       await radio2.trigger('click');
       expect(radio2.vm.checked).toBeTruthy();