✨(component): [line]: 新增 margin 属性，控制分割线边距

package/component/src/component/dropdown/index.less

@@ -66,12 +66,6 @@
   margin-left: 15px;
 }
 
-.layui-dropdown-content .layui-line-horizontal,
-.layui-dropdown .layui-line-horizontal{
-  margin: 0px;
-  border-color: #EEEEEE;
-}
-
 .layui-dropdown-content .layui-menu li.layui-disabled:hover {
   background-color: inherit;
 }

package/component/src/component/line/index.less

@@ -5,7 +5,7 @@
     width: 100%;
     min-width: 100%;
     max-width: 100%;
-    margin: 10px 0;
+    margin: var(--layui-line-margin) 0;
     border-bottom: var(--layui-line-border-width) var(--layui-line-border-style) var(--global-neutral-color-5);
     border-top-style: none;
     border-left-style: none;
@@ -21,7 +21,7 @@
     min-width: 1px;
     max-width: 1px;
     height: 1em;
-    margin: 0 8px;
+    margin: 0 var(--layui-line-margin);
     vertical-align: middle;
     border-left: var(--layui-line-border-width) var(--layui-line-border-style) var(--global-neutral-color-5);
     border-top-style: none;

package/component/src/component/line/index.vue

@@ -14,6 +14,7 @@ export interface LayLineProps {
   borderStyle?: string;
   offset?: string;
   theme?: string;
+  margin?: string;
 }
 
 const props = withDefaults(defineProps<LayLineProps>(), {
@@ -22,6 +23,7 @@ const props = withDefaults(defineProps<LayLineProps>(), {
   borderWidth: "1px",
   borderStyle: "solid",
   offset: "25px",
+  margin: "8px",
 });
 
 const slots = useSlots();
@@ -34,20 +36,21 @@ const lineTheme: string[] = [
   "black",
   "gray",
 ];
-const isSupportedTheme: boolean = lineTheme.includes(props.theme ?? "");
+const isBuiltInColor: boolean = lineTheme.includes(props.theme ?? "");
 
 const lineClass = computed(() => [
   `layui-line-${props.direction}`,
   {
-    [`layui-border-${props.theme}`]: isSupportedTheme,
+    [`layui-border-${props.theme}`]: isBuiltInColor,
     [`layui-line-with-text`]: Boolean(slots.default),
   },
 ]);
 
 const lineStyle = computed(() => ({
-  "border-color": !isSupportedTheme ? props.theme : undefined,
+  "border-color": !isBuiltInColor ? props.theme : undefined,
   "--layui-line-border-width": props.borderWidth,
   "--layui-line-border-style": props.borderStyle,
+  "--layui-line-margin": props.margin,
 }));
 
 const lineTextStyle = computed(() => ({

package/document-component/src/document/zh-CN/components/dropdown.md

@@ -394,7 +394,7 @@ export default {
             <template #default>刷新</template>
             <template #suffix><span style="font-size:10px">Ctrl + R</span></template>
           </lay-dropdown-menu-item>
-          <lay-line></lay-line>
+          <lay-line margin="0" theme="#EEE"></lay-line>
           <lay-dropdown-menu-item disabled>
             <template #prefix><lay-icon type="layui-icon-about"></lay-icon></template>
             <template #default>更多</template>

package/document-component/src/document/zh-CN/components/line.md

@@ -10,22 +10,24 @@
 ::: demo 默认为水平分割线
 
 <template>
+<lay-space direction="vertical" fill>
   默认分割线
-  <lay-line></lay-line><br/>
+  <lay-line></lay-line>
   赤色分割线
-  <lay-line theme="red"></lay-line><br/>
+  <lay-line theme="red"></lay-line>
   橙色分割线
-  <lay-line theme="orange"></lay-line><br/>
+  <lay-line theme="orange"></lay-line>
   墨绿分割线
-  <lay-line theme="green"></lay-line><br/>
+  <lay-line theme="green"></lay-line>
   青色分割线
-  <lay-line theme="cyan"></lay-line><br/>
+  <lay-line theme="cyan"></lay-line>
   蓝色分割线
-  <lay-line theme="blue"></lay-line><br/>
+  <lay-line theme="blue"></lay-line>
   黑色分割线
-  <lay-line theme="black"></lay-line><br/>
+  <lay-line theme="black"></lay-line>
   自定义颜色
-  <lay-line theme="#EEF08D"></lay-line><br/>
+  <lay-line theme="#EEF08D"></lay-line>
+</lay-space>
 </template>
 
 <script>
@@ -48,10 +50,12 @@ export default {
 ::: demo `contentPosition` 属性设置内容位置，`offset` 属性设置内容偏移量, 单位 `px` 或百分比值。也可以通过 `border-style` 和`border-width` 自定义样式
 
 <template>
-  <lay-line>🌲 🌲 🌲 🌲</lay-line><br>
+<lay-space direction="vertical" fill>
-  <lay-line contentPosition="left">left 默认</lay-line><br>
+  <lay-line>🌲 🌲 🌲 🌲</lay-line>
-  <lay-line contentPosition="right" offset="8%">right 百分比</lay-line><br>
+  <lay-line contentPosition="left">left 默认</lay-line>
-  <lay-line border-style="dashed" border-width="3px">自 定 义 宽 度 和 样 式</lay-line><br>
+  <lay-line contentPosition="right" offset="8%">right 百分比</lay-line>
+  <lay-line border-style="dashed" border-width="3px">自 定 义 宽 度 和 样 式</lay-line>
+</lay-space>
 </template>
 
 <script>
@@ -63,7 +67,7 @@ export default {
 ::: title 竖直分割线
 :::
 
-::: demo 设置 `direction` = 'vertical' 即可使用竖直分割线
+::: demo 设置 `direction = "vertical"` 即可使用竖直分割线
 
 <template>
   默认分割线
@@ -100,6 +104,7 @@ export default {
 | theme | 主题        | `red` `orange` `green` `cyan` `blue` `black` `gray` 或 string |
 | borderWidth  | 分割线宽度，单位 px | eg: `2px`|
 | borderStyle  | 分割线样式 | <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style">参见MDN：border-style</a> |
+| margin | 分割线边距，默认 8px |- |
 
 :::