feat(divider): mobile-react (#1847)

docs/mobile/api/divider.en-US.md

@@ -0,0 +1,17 @@
+---
+title: Divider
+description: Used to separate, organize, and refine content and page structure with a certain logic for organizational elements.
+spline: base
+isComponent: true
+toc: false
+---
+
+### Base Divider
+
+The divider is mainly composed of a straight line and text. Pass in divider text or other custom content through slot, and control whether the separator is vertical or horizontal through layout.
+
+{{ base }}
+
+### Dashed Style
+
+{{ theme }}

docs/mobile/api/divider.md

@@ -8,16 +8,10 @@ toc: false
 
 ### 基础分割符
 
-基础分割线是没有文字的独立线条，又分为水平分割线和垂直分割线。水平分割线常用来对不同元素内容进行分割，垂直分割线常用来做行内分割。
+分割符主要是由直线和文字组成，通过`slot`传入分割线文案或者其他自定义内容，通过`layout`控制分隔符是垂直还是横向
 
 {{ base }}
 
-### 文字 + 直线
+### 虚线样式
 
-{{ align }}
-
-### 纯文字 + 分割
-
-带文字的分割线是在分割线中嵌入文字，在需要对分割内容进行解释说明时使用
-
-{{ vertical }}
+{{ theme }}

style/mobile/components/_index.less

@@ -119,7 +119,7 @@
 
 @import "./dialog/v2/_index.less";
 
-@import "./divider/v2/_index.less";
+@import "./divider/_index.less";
 
 @import "./drawer/v2/_index.less";
 

style/mobile/components/divider/_index.less

@@ -4,68 +4,67 @@
 
 .@{prefix}-divider {
   display: flex;
-  align-items: center;
-  border-style: solid;
-  border-width: 0;
-  color: @divider-text-color;
-  font-size: @font-size-s;
+  color: @divider-color;
   border-color: @divider-color;
-  margin: 10px 0;
+  border-style: @divider-content-line-style;
+  border-width: 0;
 
   &::before,
   &::after {
+    content: "";
     display: block;
     flex: 1;
     box-sizing: border-box;
-    height: 1px;
+    border: inherit;
     border-color: inherit;
     border-style: inherit;
-    border-width: 2px 0 0;
   }
 
-  &::before {
-    content: "";
-  }
+  &--horizontal {
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
 
-  &--hairline {
     &::before,
     &::after {
+      border-top-width: 1px;
       transform: scaleY(.5);
     }
-  }
 
-  &--dashed {
-    border-style: dashed;
+    .@{prefix}-divider__content:not(:empty) {
+      margin: 0 12px;
+    }
   }
 
-  //文本位置
-  &--content-center,
-  &--content-left,
-  &--content-right {
-    &::before {
-      margin-right: 10px;
-    }
+  &--vertical {
+    flex-direction: column;
+    height: 1em;
+    margin: 0 8px;
 
+    &::before,
     &::after {
-      content: "";
-      margin-left: 10px;
+      border-left-width: 1px;
+      transform: scaleX(.5);
+    }
+
+    &-center {
+      align-items: center;
+      height: 100%;
     }
   }
 
-  &-vertical {
-    border-left: 1px solid @divider-color;
-    margin: 0 @spacer;
+  &--dashed {
+    border-style: dashed;
   }
 
-  &--content-left {
-    &::before {
-      max-width: 10%;
-    }
+  &__content {
+    font-size: @divider-content-font-size;
+    line-height: @divider-content-line-height;
+    color: @divider-content-color;
   }
 
-  &--content-right {
-    &::after {
-      max-width: 10%;
-    }
+  &--left::before,
+  &--right::after {
+    max-width: 30px;
   }
 }

style/mobile/components/divider/_var.less

@@ -1,3 +1,5 @@
-@divider-color: #E7E7E7;
-@divider-text-color: rgba(0, 0, 0, .4);
-@divider-font-size: @font-size-s;
+@divider-color: var(--td-divider-color, @bg-color-component);
+@divider-content-color: var(--td-divider-content-color, @text-color-placeholder);
+@divider-content-font-size: var(--td-divider-content-font-size, 12px);
+@divider-content-line-height: var(--td-divider-content-line-height, 20px);
+@divider-content-line-style: var(--td-divider-content-line-style, solid);