refactor(line): 重构 line, 支持竖直分割线和带内容分割线

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

@@ -0,0 +1,57 @@
+@import (reference) "../../theme/variable.less";
+
+.layui-line {
+  &-horizontal {
+    position: relative;
+    clear: both;
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+    margin: 10px 0;
+    border-bottom: var(--layui-line-border-width) var(--layui-line-border-style) @global-neutral-color-5;
+    border-top-style: none;
+    border-left-style: none;
+    border-right-style: none;
+
+    &.layui-line-with-text {
+      margin: 14px 0;
+    }
+  }
+
+  &-vertical {
+    display: inline-block;
+    min-width: 1px;
+    max-width: 1px;
+    height: 1em;
+    margin: 0 8px;
+    vertical-align: middle;
+    border-left: var(--layui-line-border-width) var(--layui-line-border-style) @global-neutral-color-5;
+    border-top-style: none;
+    border-bottom-style: none;
+    border-right-style: none;
+  }
+
+  &-text {
+    position: absolute;
+    top: 50%;
+    box-sizing: border-box;
+    padding: 0 10px;
+    color: currentColor;
+    line-height: 2;
+    background-color: #FFF;
+    transform: translateY(-50%);
+
+    &-center {
+      left: var(--layui-line-text-offset);
+      transform: translate(-50%, -50%);
+    }
+
+    &-left {
+      left: var(--layui-line-text-offset);
+    }
+
+    &-right {
+      right: var(--layui-line-text-offset);
+    }
+  }
+}

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

@@ -5,13 +5,68 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import './index.less'
 export interface LayLineProps {
+  direction?: 'horizontal' | 'vertical';
+  contentPosition?: 'center' | 'left' | 'right';
+  borderWidth?: string;
+  borderStyle?: string;
+  offset?: string;
   theme?: string;
 }
 
-const props = defineProps<LayLineProps>();
+const props = withDefaults(defineProps<LayLineProps>(),{
+  direction: 'horizontal',
+  contentPosition: 'center',
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  offset: '25px',
+})
+
+const slots = useSlots();
+const lineTheme: string[] = ['red', 'orange', 'green', 'cyan', 'blue', 'black', 'gray'];
+const isSupportedTheme: boolean = lineTheme.includes(props.theme ?? "");
+
+const lineClass = computed(() => ([
+  `layui-line-${props.direction}`,
+  {
+    [`layui-border-${props.theme}`]: isSupportedTheme,
+    [`layui-line-with-text`]: Boolean(slots.default)}
+  ])
+);
+
+const lineStyle = computed(() => ({
+  'border-color': !isSupportedTheme ? props.theme : undefined,
+  '--layui-line-border-width': props.borderWidth,
+  '--layui-line-border-style': props.borderStyle,
+}));
+
+const lineTextStyle = computed(() => ({
+  '--layui-line-text-offset': (props.contentPosition != 'center' ?  props.offset : '50%'),
+  'transform': calcTranslate()
+}));
+
+function calcTranslate(){
+  if(props.offset.includes("%")){
+    return props.contentPosition === 'right' 
+    ? 'translate(50%, -50%)'
+    : 'translate(-50%, -50%)'
+  }
+  return undefined
+}
 </script>
 
 <template>
-  <hr :class="['layui-border-' + theme]" />
+  <div 
+    :class="lineClass"
+    :style="lineStyle"
+  >
+    <span v-if="$slots.default && direction === 'horizontal'"
+      :class="[`layui-line-text layui-line-text-${contentPosition}`]"
+      :style="lineTextStyle"
+    >
+      <slot/>
+    </span>
+  </div>
 </template>

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

@@ -4,7 +4,10 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: describe 默认为水平分割线
+:::
+
+::: demo 
 
 <template>
   默认分割线
@@ -21,6 +24,8 @@
   <lay-line theme="blue"></lay-line><br/>
   黑色分割线
   <lay-line theme="black"></lay-line><br/>
+  自定义颜色
+  <lay-line theme="#EEF08D"></lay-line><br/>
 </template>
 
 <script>
@@ -37,14 +42,83 @@ export default {
 
 :::
 
+::: title 带内容的分割线
+:::
+
+::: describe 带内容的分割线，contentPosition 属性设置内容位置，offset 属性设置内容偏移量, 单位 <code>px</code> 或百分比值。也可以通过 <code>border-style</code>和<code>border-width</code>自定义样式
+:::
+
+::: demo 
+
+<template>
+  <lay-line>🌲 🌲 🌲 🌲</lay-line><br>
+  <lay-line contentPosition="left">left 默认</lay-line><br>
+  <lay-line contentPosition="right" offset="8%">right 百分比</lay-line><br>
+  <lay-line border-style="dashed" border-width="3px">自 定 义 宽 度 和 样 式</lay-line><br>
+</template>
+
+<script>
+</script>
+
+:::
+
+
+::: title 竖直分割线
+:::
+
+::: describe 设置 <code>direction = 'vertical'</code> 即可使用竖直分割线
+:::
+
+::: demo 
+
+<template>
+  默认分割线
+  <lay-line direction="vertical"></lay-line>
+  赤色分割线
+  <lay-line direction="vertical" theme="red"></lay-line>
+  橙色分割线
+  <lay-line direction="vertical" theme="orange"></lay-line>
+  墨绿分割线
+  <lay-line direction="vertical" theme="green"></lay-line>
+  青色分割线
+  <lay-line direction="vertical" theme="cyan"></lay-line>
+  蓝色分割线
+  <lay-line direction="vertical" theme="blue"></lay-line>
+  黑色分割线
+  <lay-line direction="vertical" theme="black"></lay-line>
+</template>
+
+<script>
+</script>
+
+:::
+
+
+
 ::: title Line 属性
 :::
 
 ::: table
 
-| Name  | Description | Accepted Values                               |
+| 属性  | 说明 | 可选值                               |
 | ----- | ----------- | --------------------------------------------- |
-| theme | 主题        | `orange` `green` `cyan` `blue` `black` `gray` |
+| direction  | 分割线的方向 | `horizontal` `vertical`|
+| contentPosition  | 分割线内容位置 | `center` `left` `right` |
+| offset  | 分割线内容偏移量，单位 px | eg: `30px` `20%`|
+| 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> |
+
+:::
+
+::: title Line 插槽
+:::
+
+::: table
+
+| 插槽 | 说明       |
+| ------ | ---------- |
+| default| 默认插槽，仅支持 direction 为 `horizontal`|
 
 :::