feat(divider): 实现分割线的组件

docs/content/docs/2.components/1.basic/08.divider.md

@@ -1,7 +1,6 @@
 ---
 title: "Divider 分割线"
 description: "用于分隔内容的分割线组件"
-badge: Dev
 authors:
   - name: sKy
     username: skiyee
@@ -10,11 +9,214 @@ authors:
     target: _blank
 links:
   - label: Source
-    icon: radix-icons:github-logo
-    to: https://github.com/skiyee/ui/blob/main/uni-ui/src/components/sk-divider.vue
+    icon: i-radix-icons:github-logo
+    to: https://github.com/skiyee/ui/blob/main/packages/skiyee-uni-ui/src/components/sk-divider.vue
     target: _blank
 ---
 
-::warning
-该组件目前处于开发阶段，诚挚邀请开发者们访问 [GitHub仓库](https://github.com/skiyee/ui){:target="_blank"} 参与技术讨论或提交贡献
-::
+::CodePreview{path="/pages-basic/divider/base" height="180"}
+<!-- automd:file src="../../../../../examples/uni/src/pages-basic/divider/base.vue" code no-name -->
+
+```vue
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <SkDivider />
+    <SkDivider />
+  </div>
+</template>
+```
+
+<!-- /automd -->
+::
+
+## 用法
+
+### Text 文本
+
+| Prop   | 类型               | 默认值 | 描述             |
+|--------|--------------------|--------|------------------|
+| `text` | `string \| number` | -      | 通过属性快速设置文本内容 |
+
+::tip
+也可以通过 [默认插槽 default](#slots) 自定义任意内容（图标、徽标或更复杂的节点）
+::
+
+::CodePreview{path="/pages-basic/divider/text" height="240"}
+<!-- automd:file src="../../../../../examples/uni/src/pages-basic/divider/text.vue" code no-name -->
+
+```vue
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <SkDivider text="今日推荐" />
+    <SkDivider>
+      <div class="flex items-center gap-2 text-secondary text-body-small">
+        <SkIcon name="i-lucide:sparkles" size="32rpx" />
+        <span>自定义插槽</span>
+      </div>
+    </SkDivider>
+  </div>
+</template>
+```
+
+<!-- /automd -->
+::
+
+### Content Position 文本位置
+
+| Prop               | 类型                       | 默认值   | 描述                               |
+|--------------------|----------------------------|----------|------------------------------------|
+| `contentPosition`  | `"start" \| "center" \| "end"` | `center` | 控制文本相对整条横向分割线的位置 |
+
+::CodePreview{path="/pages-basic/divider/position" height="240"}
+<!-- automd:file src="../../../../../examples/uni/src/pages-basic/divider/position.vue" code no-name -->
+
+```vue
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <SkDivider text="左对齐" content-position="start" />
+    <SkDivider text="居中" content-position="center" />
+    <SkDivider text="右对齐" content-position="end" />
+  </div>
+</template>
+```
+
+<!-- /automd -->
+::
+
+### Dashed 虚线
+
+| Prop     | 类型      | 默认值  | 描述           |
+|----------|-----------|---------|----------------|
+| `dashed` | `boolean` | `false` | 是否渲染为虚线 |
+
+::CodePreview{path="/pages-basic/divider/dashed" height="220"}
+<!-- automd:file src="../../../../../examples/uni/src/pages-basic/divider/dashed.vue" code no-name -->
+
+```vue
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <SkDivider text="虚线分割" dashed />
+    <SkDivider dashed />
+  </div>
+</template>
+```
+
+<!-- /automd -->
+::
+
+### Color 颜色
+
+| Prop        | 类型     | 默认值 | 描述                                 |
+|-------------|----------|--------|--------------------------------------|
+| `color`     | `string` | -      | 设置线条和默认文本的颜色             |
+| `textColor` | `string` | -      | 仅覆盖文本颜色，优先级高于 `color` |
+
+::CodePreview{path="/pages-basic/divider/color" height="260"}
+<!-- automd:file src="../../../../../examples/uni/src/pages-basic/divider/color.vue" code no-name -->
+
+```vue
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <SkDivider text="品牌色" color="#4D80F0" />
+    <SkDivider text="自定义文字颜色" color="#FF6B6B" text-color="#FFB347" />
+    <SkDivider text="粗线条" :hairline="false" thickness="4px" />
+  </div>
+</template>
+```
+
+<!-- /automd -->
+::
+
+### Thickness 粗细
+
+| Prop        | 类型               | 默认值 | 描述                                |
+|-------------|--------------------|--------|-------------------------------------|
+| `thickness` | `string \| number` | `1px`  | 调整线条粗细，支持数值或任意 CSS 单位 |
+
+::tip
+若需要完全按照 `thickness` 控制粗细，请先将 `hairline` 设置为 `false`。
+::
+
+::CodePreview{path="/pages-basic/divider/thickness" height="240"}
+<!-- automd:file src="../../../../../examples/uni/src/pages-basic/divider/thickness.vue" code no-name -->
+
+```vue
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <SkDivider text="默认 1px" />
+    <SkDivider text="2px" :thickness="2" />
+    <SkDivider text="4px" thickness="4px" />
+  </div>
+</template>
+```
+
+<!-- /automd -->
+::
+
+### Hairline 发丝线
+
+| Prop      | 类型      | 默认值 | 描述                             |
+|-----------|-----------|--------|----------------------------------|
+| `hairline` | `boolean` | `true` | 是否启用 1px 发丝线（细线）样式 |
+
+::CodePreview{path="/pages-basic/divider/hairline" height="240"}
+<!-- automd:file src="../../../../../examples/uni/src/pages-basic/divider/hairline.vue" code no-name -->
+
+```vue
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <SkDivider text="默认发丝线" />
+    <SkDivider text="关闭发丝线" :hairline="false" />
+    <SkDivider text="自定义粗细" :hairline="false" thickness="4px" />
+  </div>
+</template>
+```
+
+<!-- /automd -->
+::
+
+### Orientation 方向
+
+| Prop          | 类型                       | 默认值      | 描述                     |
+|---------------|----------------------------|-------------|--------------------------|
+| `orientation` | `"horizontal" \| "vertical"` | `horizontal` | 选择横向或纵向分割线     |
+| `length`      | `string \| number`         | -           | 纵向分割线高度（可选）   |
+
+::CodePreview{path="/pages-basic/divider/vertical" height="220"}
+<!-- automd:file src="../../../../../examples/uni/src/pages-basic/divider/vertical.vue" code no-name -->
+
+```vue
+<template>
+  <div class="flex items-center justify-center gap-6 p-4 text-body-medium">
+    <span>上午</span>
+    <SkDivider orientation="vertical" length="64px" />
+    <span>下午</span>
+    <SkDivider orientation="vertical" dashed :thickness="2" length="48px" />
+    <span>晚上</span>
+  </div>
+</template>
+```
+
+<!-- /automd -->
+::
+
+## Props 总览
+
+| Prop             | 描述                                            |
+|------------------|-------------------------------------------------|
+| `text`           | 设置文本内容，优先级低于插槽                    |
+| `color`          | 控制线条和默认文本颜色                          |
+| `textColor`      | 单独覆盖文本颜色                                |
+| `orientation`    | 横向或纵向分割线                                |
+| `contentPosition`| 控制横向文本位置                                |
+| `dashed`         | 是否渲染为虚线                                  |
+| `hairline`       | 是否启用 1px 发丝线样式，关闭后可配合 `thickness` |
+| `thickness`      | 控制线条粗细（关闭发丝线后生效）                |
+| `length`         | 纵向分割线高度                                  |
+| `clax`           | 传入 `@skiyee/ucv` 生成的额外类名               |
+
+## Slots
+
+| Slot      | 描述               |
+|-----------|--------------------|
+| `default` | 自定义文案或内容   |

examples/uni/src/pages-basic/divider/base.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <SkDivider />
+    <SkDivider />
+  </div>
+</template>

examples/uni/src/pages-basic/divider/color.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <SkDivider text="品牌色" color="#4D80F0" />
+    <SkDivider text="自定义文字颜色" color="#FF6B6B" text-color="#FFB347" />
+    <SkDivider text="粗线条" :hairline="false" thickness="4px" />
+  </div>
+</template>

examples/uni/src/pages-basic/divider/dashed.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <SkDivider text="虚线分割" dashed />
+    <SkDivider dashed />
+  </div>
+</template>

examples/uni/src/pages-basic/divider/hairline.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <SkDivider text="默认发丝线" />
+    <SkDivider text="关闭发丝线" :hairline="false" />
+    <SkDivider text="自定义粗细" :hairline="false" thickness="4px" />
+  </div>
+</template>

examples/uni/src/pages-basic/divider/position.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <SkDivider text="左对齐" content-position="start" />
+    <SkDivider text="居中" content-position="center" />
+    <SkDivider text="右对齐" content-position="end" />
+  </div>
+</template>

examples/uni/src/pages-basic/divider/text.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="flex flex-col gap-6 p-4">
+    <div class="flex flex-col gap-4">
+      <SkDivider text="今日推荐" />
+      <SkDivider text="左侧标签" content-position="start" />
+      <SkDivider text="右侧标签" content-position="end" />
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <SkDivider text="品牌橙" color="#FF7A18" />
+      <SkDivider text="专属文案" text-color="#10B981" />
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <SkDivider>
+        <div class="flex items-center gap-2 text-secondary text-body-small">
+          <SkIcon name="i-lucide:sparkles" size="32rpx" />
+          <span>自定义插槽</span>
+        </div>
+      </SkDivider>
+      <SkDivider>
+        <div class="flex items-center gap-2 text-tertiary text-body-small">
+          <SkIcon name="i-lucide:clock-10" size="30rpx" />
+          <span>09:00-12:00</span>
+        </div>
+      </SkDivider>
+      <SkDivider>
+        <div class="flex items-center gap-2 text-secondary text-body-small">
+          <span class="px-3 py-1 rounded-full bg-primary/10 text-primary text-caption">
+            进行中
+          </span>
+        </div>
+      </SkDivider>
+    </div>
+  </div>
+</template>

examples/uni/src/pages-basic/divider/thickness.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <SkDivider text="默认 1px" />
+    <SkDivider text="2px" :thickness="2" />
+    <SkDivider text="4px" thickness="4px" />
+  </div>
+</template>

examples/uni/src/pages-basic/divider/vertical.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex items-center justify-center gap-6 p-4 text-body-medium">
+    <span>上午</span>
+    <SkDivider orientation="vertical" length="64px" />
+    <span>下午</span>
+    <SkDivider orientation="vertical" dashed :thickness="2" length="48px" />
+    <span>晚上</span>
+  </div>
+</template>

examples/uni/src/pages.json

@@ -107,6 +107,38 @@
           "path": "button/variant",
           "type": "page"
         },
+        {
+          "path": "divider/base",
+          "type": "page"
+        },
+        {
+          "path": "divider/color",
+          "type": "page"
+        },
+        {
+          "path": "divider/dashed",
+          "type": "page"
+        },
+        {
+          "path": "divider/hairline",
+          "type": "page"
+        },
+        {
+          "path": "divider/position",
+          "type": "page"
+        },
+        {
+          "path": "divider/text",
+          "type": "page"
+        },
+        {
+          "path": "divider/thickness",
+          "type": "page"
+        },
+        {
+          "path": "divider/vertical",
+          "type": "page"
+        },
         {
           "path": "icon/base",
           "type": "page"
@@ -733,4 +765,4 @@
       ]
     }
   ]
-}
+}

examples/uni/types/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     SkCheckbox: typeof import('@skiyee/uni-ui/components/sk-checkbox.vue')['default']
     SkCheckboxGroup: typeof import('@skiyee/uni-ui/components/sk-checkbox-group.vue')['default']
     SkDialog: typeof import('@skiyee/uni-ui/components/sk-dialog.vue')['default']
+    SkDivider: typeof import('@skiyee/uni-ui/components/sk-divider.vue')['default']
     SkField: typeof import('@skiyee/uni-ui/components/sk-field.vue')['default']
     SkForm: typeof import('@skiyee/uni-ui/components/sk-form.vue')['default']
     SkIcon: typeof import('@skiyee/uni-ui/components/sk-icon.vue')['default']

examples/uni/types/pages.d.ts

@@ -27,6 +27,14 @@ interface NavigateToOptions {
        "/pages-basic/button/size" |
        "/pages-basic/button/usage" |
        "/pages-basic/button/variant" |
+       "/pages-basic/divider/base" |
+       "/pages-basic/divider/color" |
+       "/pages-basic/divider/dashed" |
+       "/pages-basic/divider/hairline" |
+       "/pages-basic/divider/position" |
+       "/pages-basic/divider/text" |
+       "/pages-basic/divider/thickness" |
+       "/pages-basic/divider/vertical" |
        "/pages-basic/icon/base" |
        "/pages-basic/icon/color" |
        "/pages-basic/icon/name" |